Echart使用仪表盘图表

2018-10-29 小若 Echart图表实用录


)RYQ(L~0T`}YIO)LB0VDR_V.png
 一些常用的配置参数:

 let setting = {
    labelMap: {
        'a': obj.name
        },
    dataName: {
        'a': obj.unit
        },
    seriesMap: {
        'a': {
            max: obj.max,
            min: obj.min,
            radius: '100%',
            splitNumber: 8,   //刻度数量
            axisLine: {
                lineStyle: {
                    color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                width: 5,
                shadowColor: '#fff',
                shadowBlur: 100
              }
            },
            axisLabel: {    //刻度标签
                textStyle: {
                    // color: '#000',
                    fontSize: 8,
                shadowColor: '#000',
                formatter: function(v){
                        return v.toFixed(2);
                    },
              }
            },
            axisTick: { //刻度样式
                length:15,  //长度
              // splitNumber: 10,  //分割的刻度数
              lineStyle: {
                    color: 'auto',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            splitLine: {
                length:10,    //指针长度
              lineStyle: {
                    width: 3,
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            pointer: {
                shadowColor: '#fff',
              shadowBlur: 5
            },
            title: {  //标题
                textStyle: {
                    fontWeight: 'bolder',
                fontSize: 20,
                fontStyle: 'italic',
                color: '#000',
                shadowColor: '#fff',
                shadowBlur: 10,
              }
            },
            detail: { //详细
                // backgroundColor: '#999',  //背景色
                // borderWidth: 1,           //边框宽度
                // borderColor: '#000',   //边框颜色
                // shadowColor: '#000',   //背景阴影颜色
                // shadowBlur: 5,            //背景阴影长度
                offsetCenter: [0, '85%'], //相对仪表盘偏移
              textStyle: {
                    // fontWeight: 'bolder',
                    color: '#000'
              }
            }
          }
        },
}

基本的常用参数都在这里了.使用过程中遇到一个问题,由于仪表盘是根据一个最大值,最小值进行等比例划分,因此可能出现这种情况:

@CNZD3GAC1_X$HZP0NLH~LL.png


解决办法:


 axisLabel: {    //刻度标签
     textStyle: {
     // color: '#000',
     fontSize: 8,
     shadowColor: '#000',
     formatter: function(v){
          return v.toFixed(2);//保留两位小数
     },
     }
 }





标签: Echart v-chart

发表评论:

Powered by emlog 备案号:豫ICP备18002778号