Js + echarts 仪表图

最新推荐文章于 2024-11-11 19:18:28 发布

转载最新推荐文章于 2024-11-11 19:18:28 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/KellyChen/p/9520975.html

文章标签：

#javascript #ViewUI

本文介绍如何使用ECharts库创建一个动态仪表盘图表，并详细解释了相关参数配置，包括tooltip提示、系列类型定义、轴线样式、刻度标签显示等。

var drawGaugeChart=function(chartId,maxValue,unit,curValue,target){
    var target=0.5
    var option={
        tooltip : {
            formatter:function(data){
                return "业务指标<br>完成度: " + Math.round(data.value/maxValue * 100) + '%'
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                min:0,
                max:maxValue,
                splitLine:{
                    show: false
                },
                /*startAngle:180,
                endAngle:0,*/
                axisLine:{
                    show:false,
                    lineStyle:{
                        width:20,    //圆弧的宽度
                        color: [[0.4, '#3c8dbc'], [1, '#D2D6DE']],        //圆弧的颜色
                    }
                },
                axisTick:{
                    show: false         //坐标小刻度
                },
                axisLabel:{
                    distance: -55,      //label和仪表盘的距离
                    formatter:function(value){
                        switch(value+ ''){      //在仪表盘只显示最大最小值
                            case '0': return value;
                            case '1.5': return value +'亿';
                            case '1': return value +'亿';
                            //case '5000': return value;break;
                            case '10000': return value;

                        }
                    },
                    color: '#3c8dbc'           //标记颜色

                },
                itemStyle:{
                   normal:{
                        color:'#F38000'         //指针颜色
                   }
                },
                splitNumber:10,
                /* markPoint:{
                      label:{
                          position: 'bottom'
                      }
                 },*/
                detail: {
                    fontWeight: 'bolder',
                    borderRadius: 3,
                    backgroundColor: '#444',
                    borderColor: '#aaa',
                    shadowBlur: 5,
                    shadowColor: '#333',
                    shadowOffsetX: 0,
                    shadowOffsetY: 3,
                    borderWidth: 2,
                    textBorderColor: '#000',
                    textBorderWidth: 2,
                    textShadowBlur: 2,
                    textShadowColor: '#fff',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0,
                    fontFamily: 'Arial',
                    width: 100,
                    color: '#eee',
                    fontSize:15,    //修改value字体
                    formatter:function(value){
                        return Math.round(value/maxValue * 100) + '%'       
                    }
                },
                data: [{value: curValue, name: '完成率'}]
            }
        ]
    }
    var myChart=echarts.init(document.getElementById(chartId))
    myChart.setOption(option);
    window.addEventListener('resize',myChart.resize)

};