ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上。Echarts提供了很多的图表,像是仪表图,关联图等,代码比较好上手,有很多配置项,下面是我记录我做过的仪表盘。
效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191009091629230.png)
需求
1) 颜色渐变效果
2) 刻度在仪表盘外面
代码
var node=$("#BA_967727375804118").find("span:last").text()
var data=[{
"value": node,
}]
var myChart = echarts.init(document.getElementById('BA_732211024644516'));
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '业务指标',
min:50,
max:100,
type: 'gauge',
radius:'80%',
data: data,
axisLine: {//仪表盘轴线样式
show: true,
lineStyle: {
color: [
[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#5C9ED0"
},
{
offset: 0.5,
color: "#94A79F"
},
{
offset: 1,
color: "#F3B943"
}
])
]
],
width:15,
}
},
axisLabel: { // 刻度标签。
show: true, // 是否显示标签,默认 true。
distance: -47, // 标签与刻度线的距离,默认 5。
color: "#fff", // 文字的颜色,默认 #fff。
fontSize: 12, // 文字的字体大小,默认 5。
formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// fontWeight:'bold'
},
// 项目名和数据
title: { // 仪表盘标题。
show: false, // 是否显示标题,默认 true。
offsetCenter: [0,"40%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: "#fff", // 文字的颜色,默认 #333。
fontSize: 14, // 文字的字体大小,默认 15。
},
detail: { //数据显示
show: false,
formatter:'{value}',
color:'#fff',
fontSize:20,
offsetCenter: [0,"70%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
},//仪表盘显示数据
// 指针
pointer:{
length:'80%'
},
itemStyle: { // 仪表盘指针样式。
color: "auto", // 指针颜色,默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。
// shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
// shadowColor: "#fff", // 阴影颜色。支持的格式同color。
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
},
// 分割线
splitLine: { // 分隔线样式。
show: false
},
axisTick:{ //刻度样式
show:false
},
}
]
};
myChart.setOption(option);
注意
使用之前一定要先导入echarts