Echarts+jquery实现复杂的渐变色仪表盘

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上。Echarts提供了很多的图表，像是仪表图，关联图等，代码比较好上手，有很多配置项，下面是我记录我做过的仪表盘。

效果图

需求

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