多种特殊echars图表实现的方式记录

简介: 多种特殊echars图表实现的方式记录
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

1.echars柱状图堆叠图形制作

image.png

代码如下:

mychart2() {
    myChart2 = echarts.init(document.getElementById('profitTrends'));
    var data = {
        area: ['2020Q3','2020Q4', '2121Q1', '2121Q2','2121Q3'],
        legend: ['重大决策', '重要人事任免', '重大项目安排', '大额度资金运作'],
        data: [
            [808, 745, 773, 805, 258],
            [74, 59, 71, 76, 30],
            [152, 99, 69, 111, 36],
            [42, 39, 26, 46, 13],
        ]
    }
    var colors = ['#02BCD0','#0780EB','#9A86FF','#CA5670']
    option = {
        color: colors,
        legend: {
            top:'86%',
            left:'25%',
            icon:"rect",
            selectedMode:false,//取消图例上的点击事件
            itemWidth:15,
            itemHeight:3,
            textStyle: {
                color: '#fff',
                fontSize: 12,
                padding: [0,15,0,5]
            },
            data: data.legend
        },
        tooltip: {
            transitionDuration: 0,
            trigger: 'axis',
            axisPointer: {
                // type: 'shadow',
                type: 'none'
            }
        },
        grid: {
            left: '15%',
            top: '25%',
            right: '8%',
            bottom: '38%',
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                show: true,
                interval:0,
                rotate:40,
                textStyle: {
                    color:"#ffffff",
                    fontSize: 12
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(12, 87, 169, 1)",
                    type:"dotted"
                },
                width: 5
            },
            axisTick: {
                show: false,
            },
            data: data.area
        },
        yAxis: {
            type: 'value',
            interval:200,
            axisLabel: {
                formatter: '{value}',
                color: '#ffffff',
                textStyle: {
                    fontSize: 12,
                    color: '#ffffff',
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(12, 87, 169, 1)"
                },
                width: 5
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show:true,
                lineStyle:{
                    color:'rgba(12, 79, 129, 1)',
                    type:"dotted"
                }
            },
        },
        series: []
    };
    for (var i = 0; i < data.legend.length; i++) {
        option.series.push({
            name: data.legend[i],
            type: 'bar',
            stack: '总量',
            barWidth: '25',
            label: {
                show: false,
                position: 'insideRight'
            },
            data: data.data[i]
        })
    }
    myChart2.setOption(option);
}

2.echars 环形图百分比

image.png

代码如下:(角度需要自己计算,如果是百分百的圆就不需要averagenum,直接写值就可以了)

function mychart3() {
  var averagenum=50.22;
  myChart3=echarts.init(document.getElementById('profitIncome'));
  option = {
    var pass_rate = 70,average = averagenum*0.7,total = 100;  // 360*70%=252度数     252/360=0.7
        let option = {
            series: [
                {
                    name:'通过率'+pass_rate+'%',
                    type:'pie',
                    radius: ['52%', '54%'],
                    //禁止鼠标悬停放大
                    hoverAnimation: false,
                    silent: true,
                    //环的位置
                    label: {
                       show: false,
                       position: 'center',
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {
                          value:pass_rate, //需要显示的数据
                        //   name: '通过率'+pass_rate+'%',
                          itemStyle: {
                            normal: {
                             color:'#008AD4',
                            }
                          }
                        },
                        {
                          value:total-pass_rate,
                          //不需要显示的数据,颜色设置成和背景一样
                          itemStyle: {
                            normal: {
                             color: 'transparent'
                            }
                          }
                       }
                    ]
                },
                {
                    name:'平均值'+average+'%',
                    type:'pie',
                    // roundCap: true,
                    radius: ['48%', '52%'],
                    hoverAnimation: false,
                    silent: true,
                    label: {
                       show: false,
                       position: 'center',
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {   
                            // name:'平均值'+average+'%',
                            value:average,
                            itemStyle: {
                                normal: {
                                    color: {
                                        // 完成的圆环的颜色
                                        colorStops: [
                                            {
                                            offset: 0,
                                            color: "#2449F3" // 0% 处的颜色
                                            },
                                            {
                                            offset: 1,
                                            color: "#7493F8" // 100% 处的颜色
                                            }  
                                        ]
                                    },
                                }
                            }
                        },
                       {
                            value:total-average,
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                             }
                       }
                    ],
                },
            ]
        };
  }
  myChart3.setOption(option);
}

3.echarts 柱形图

image.png

代码如下:

function mychart3() {
    myChart3 = echarts.init(document.getElementById('profitIncome'));
    var xData = ["境内", "境外"]
    var line = ["2942", "1834"];
    var attr ={
        'name':'月平均单价',
        'unit':'元/单'
    }
    var max =Math.max.apply(null,line);
    var maxnum=max+1000;
    // console.log(maxnum)
    var colors = []
    option = {
        // tooltip: {
        //     trigger: 'item',
        //     padding: 1,
        //     formatter: function(param) {
        //         var resultTooltip =
        //             "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
        //             "<div style='text-align:center;'>" +  param.name + "</div>" +
        //             "<div style='padding-top:5px;'>"+
        //             "<span style=''> " +attr.name + ": </span>" +
        //             "<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>"+
        //             "</div>" +
        //             "</div>";
        //         return resultTooltip
        //     }
        // },
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '25%',
        },
        legend: {
            show: true,
            icon: 'circle',
            orient: 'horizontal',
            top: '90.5%',
            right: 'center',
            itemWidth: 16.5,
            itemHeight: 6,
            // itemGap: 30,
            textStyle: {
                // color: '#FFFFFF'
                color: '#C9C8CD',
                fontSize: 14
            }
        },
        xAxis: [{
            // show:false,
            data: ["境内", "境外"],
            triggerEvent:true,//设置坐标点击事件
            axisLabel: {
                color: '#77C8FF',
                fontSize: 12,
                height:40,
                lineHeight:40
            },
            axisLine: {
                show: false //不显示x轴
            },
            axisTick: {
                show: false //不显示刻度
            },
            boundaryGap: true,
            splitLine: {
                show: false,
                width: 0.08,
                lineStyle: {
                    type: "solid",
                    color: "#03202E"
                }
            }
        }],
        yAxis: [{
            // max: maxnum,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0C57A9',
                    type: 'dotted'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle:{
                    color:"#2A6FDA",
                    type:"dotted",
                    width:'2'
                }
            },
            axisLabel: {
                color: '#4F88BD',
                fontSize: 12,
                textStyle: {
                    // color: '#888'
                },
            },
        }],
        series: [
            {//柱底圆片
                name: "",
                type: "pictorialBar",
                symbolSize: [46, 10],//调整截面形状
                symbolOffset: [0, 5],
                z: 12,
                itemStyle: {
                        normal: {
                            color: function(params){
                                var a = params.name.slice(0,2);
                                if(a === '境内'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(21, 106, 199, 0.4)"
                                    },{
                                        offset: 1,
                                        color: "rgba(55, 130, 211, .5)"
                                    }], false)
                                }else if(a === '境外'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0, 203, 159, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color:  'rgba(0, 203, 159, 0.7)'// 100% 处的颜色
                                    }], false)
                                }
                            },
                            label:{
                                show:true,
                                position:'top',
                                padding:[0,0,5,0],
                                backgroundColor:"transparent",
                                color:"#77C8FF"
                            },
                        },
                    },
                data: line
            }, 
            //柱体
            {
                name: '',
                type: 'bar',
                barWidth: 46,
                barGap: '0%',
                itemStyle: {
                        normal: {
                            color: function(params){
                                var a = params.name.slice(0,2);
                                if(a === '境内'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(33, 109, 196, 1)"
                                    },{
                                        offset: 1,
                                        color: "rgba(29, 95, 176, 0.3)"
                                    }], false)
                                }else if(a === '境外'){
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color:  'rgba(0, 203, 159, 1)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 203, 159, 0.3)' // 100% 处的颜色
                                    }], false)
                                }
                            },
                        }
                    },
                data: line
            }, 
            //柱顶圆片
            {
                name: "",
                type: "pictorialBar",
                symbolSize: [46, 10],//调整截面形状
                symbolOffset: [0, -5],
                z: 12,
                symbolPosition: "end",
                itemStyle: {
                    normal: {
                        color: function(params){
                            var a = params.name.slice(0,2);
                            if(a === '境内'){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(21, 106, 199, 0.4)"
                                },{
                                    offset: 1,
                                    color: "rgba(55, 130, 211, .5)"
                                }], false)
                            }else if(a === '境外'){
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 203, 159, 0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 203, 159, 0)' // 100% 处的颜色
                                }], false)
                            }
                        },
                    }
                },
                data: line
            }
        ]
    };
    myChart3.setOption(option);
}

4.echars横向柱形图

image.png

代码如下:

function mychart2() {
    myChart2 = echarts.init(document.getElementById('profitTrends'));
    // 指定图表的配置项和数据
    var data = [193,343,343,223,223,343,223,223]
    var list=['其它专项','股权','信息化','科技','修理','技改','基建','前期']
    var barWidth = 10;
    option = {
        grid: {
            left: '15%',
            top: '15%',
            right: '8%',
            bottom: '15%',
        },
        xAxis: {
            show: false,
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            data: list,
            splitLine: {
                show: false,
            },
            axisLabel: {
                textStyle: { fontSize: '80%', color: '#FFFFFF' },
            },
            axisLine: {
                show: true,//显示纵坐标
                lineStyle:{
                    color:"#153F77",
                    width:'3',
                    type:'solid'
                }
            },
            axisTick: false,
        },
        series: [
            {
                type: 'pictorialBar',
                type: 'bar',
                barWidth:barWidth,
                zlevel: 2,
                data: data,
                itemStyle:{
                    normal:{
                        barBorderRadius: [0, 100, 0 ,0],
                        color:function(params){//渐变色
                            var colorList = [
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                                ['rgba(8, 41, 88, 1)', 'rgba(1, 176, 147, 1)'],
                                ['rgba(13, 35, 65, 1)', 'rgba(42, 125, 249, 1)'],
                            ];
                            var index=params.dataIndex;
                            if(params.dataIndex>=colorList.length){
                                index=params.dataIndex-colorList.length;
                            }
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [{
                                        offset: 0,
                                        color: colorList[index][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colorList[index][1]
                                    }
                                ]);
                        },
                        label:{
                            show:true,
                            position:'right',
                            formatter:function(params){//设置柱状图上文本的颜色不同
                                // console.log(params.dataIndex)
                                if(params.dataIndex %2==0){
                                    return '{a|'+ data[params.dataIndex]+'}'
                                }else{
                                    return '{b|'+ data[params.dataIndex]+'}'
                                }
                            },
                            rich:{
                                a:{
                                    color:"#03A88E"
                                },
                                b:{
                                    color:"#2B8FFF"
                                },
                            }
                        },
                    }
                },
                // yAxisIndex:0,
            },
            {
                name:"框",
                type:'bar',
                barGap: '-100%',//让边框和柱子在同一个位置
                barWidth:barWidth,
                // barCategoryGap:20,
                zlevel: 2,
                data: data,
                itemStyle:{
                    //颜色
                    color:"none",
                    //边框色
                    borderColor:"#00C1DE",
                    //border宽度
                    borderWidth:1,
                    //border的边角弧度
                    barBorderRadius: [0, 100, 0 ,0],
                    // padding:[2,2,2,2],
                }
                // yAxisIndex:1,
            }  
        ]
    };
    myChart2.setOption(option);
}

5.echars 柱形图里边带小方格

image.png

代码如下:

function mychart4(){
    mychart4 = echarts.init(document.getElementById('profitRate'));
    let colors = [{
        one: "#67E0E3",
        two: "#0181DE",
    }, {
        one: "#9336FF",
        two: "#146AFF",
    }, {
        one: "#082757",
        two: "#02B093",
    }];
    let echartData = [{
            name: "金融",
            value: 1300,
        },
        {
            name: "科技环保",
            value: 2200,
        },
        {
            name: "化工",
            value: 3900,
        },
        {
            name: "运输",
            value: 1800,
        },

        {
            name: "水电",
            value: 6289,
        },
        {
            name: "新能源",
            value: 8288,
        },
        {
            name: "火电",
            value: 3100,
        },
        {
            name: "煤炭",
            value: 2021,
        },
    ];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    option = {
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '25%',
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            triggerEvent:true,//设置坐标点击事件
            axisLine: {
                show: false
            },
            axisLabel: {
                color: "#81ACCF",
                fontSize: '80%',
                
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            // max:100,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#0C4F81"
                }
            },
            nameTextStyle: {
                color: '#81ACCF',
                fontSize: '60%',
            },
            axisLabel: {
                color: "#4F88BD",
                fontSize: '60%',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    type: "dotted",
                    color: "#0C4F81"
                }
            }
        },
        series: [
            {
                name:'集团各板块资产负债率',
                type: 'bar', //设置类型为象形柱状图
                barWidth: '18', //柱图宽度
                itemStyle: {
                    normal: {
                        color: function (params) {
                            let odd = params.dataIndex % 2;
                            return {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: colors[odd].one // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: colors[odd].two // 100% 处的颜色
                                }
                                ]
                            }
                        },
                        label:{
                            show:true,
                            position:'top',
                            formatter:function(params){//设置柱状图上文本的颜色不同
                                // console.log(params.dataIndex)
                                if(params.dataIndex %2==0){
                                    return '{a|'+ yAxisData[params.dataIndex]+'}'
                                }else{
                                    return '{b|'+ yAxisData[params.dataIndex]+'}'
                                }
                            },
                            rich:{
                                a:{
                                    color:"#0EFCFF"
                                },
                                b:{
                                    color:"#6947FF"
                                },
                            }
                        }
                    },
                },
                z: 10,
                zlevel: 0,
                data: yAxisData,
            },
            {
                type: 'pictorialBar', //设置类型为象形柱状图
                symbol: 'rect', //图形类型,带圆角的矩形
                symbolMargin: '2', //图形垂直间隔
                symbolRepeat: true, //图形是否重复
                // 分隔
                itemStyle: {
                    normal: {
                        color: '#0F375F'
                    }
                },
                symbolRepeat: 'fixed',
                symbolClip: true,
                symbolSize: [18, 2],
                symbolPosition: 'start',
                symbolOffset: [0, -1],
                // symbolBoundingData: this.total,
                width: "100%",
                z: 0,
                zlevel: 1,
                data: yAxisData,
            }
        ]
    };
    mychart4.setOption(option);
}

6.echars 三角形图表

image.png

代码如下:

function mychart3() {
    myChart3 = echarts.init(document.getElementById('profitIncome'));
    let echartData = [{
        name: "境内",
        value: 4100,
    },
    {
        name: "境外",
        value: 2990,
    }];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    option = {
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            triggerEvent:true,//设置坐标点击事件
            axisTick: {show: false},
            axisLine: {
                show: false,
            },
            axisLabel: {
                color: "#81ACCF",
                fontSize: '80%',
            },
        },
        yAxis: {
            nameTextStyle:{
                color:'#81ACCF',
                fontSize:'60%',
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dotted",
                    color: "#0C4F81"
                }
            },
            axisLabel: {
                color: "#4F88BD",
                fontSize: '60%',
                formatter: '{value}'
            },
            axisLine: { //改变坐标轴的颜色
                show: true,//显示纵坐标
                lineStyle: {
                    color: "#0C4F81"
                },
            },
        },
        color: ['#307fd0'],
        series: [{
            name: 'hill',
            type: 'pictorialBar',
            //位置偏移,距离0刻度的位置
            barCategoryGap: '80%',
            //图形宽度
            barWidth:50,
            //图形形状
            symbol: 'path://M150 50 L130 130 L170 130  Z',
            itemStyle: {
                normal: {
                    color: function(params){
                        var a = params.name.slice(0,2);
                        if(a === '境内'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "rgba(43, 128, 255, 1)"
                            },{
                                offset: 1,
                                color: "rgba(8, 33, 73, 1)"
                            }], false)
                        }else if(a === '境外'){
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(2, 176, 147, 1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color:  'rgba(8, 39, 87, 1)'// 100% 处的颜色
                            }], false)
                        }
                    },
                    label: {
                        show: true,  //开启显示
                        position: 'top',  //在上方显示
                        textStyle: {  //数值样式
                            // color: '#77C8FF',
                            fontSize: '60%'
                        },
                        formatter:function(params){//设置柱状图上文本的颜色不同
                            // console.log(params.dataIndex)
                            if(params.dataIndex %2==0){
                                return '{a|'+ yAxisData[params.dataIndex]+'}'
                            }else{
                                return '{b|'+ yAxisData[params.dataIndex]+'}'
                            }
                        },
                        rich:{
                            a:{
                                color:"#2B8FFF"
                            },
                            b:{
                                color:"#03A88E"
                            },
                        }
                    },
                },
            },
            data: yAxisData,
            z: 10
        }, {
            name: 'glyph',
            type: 'pictorialBar',
            barGap: '0%',
            symbolPosition: 'end',
            symbolSize: 50,
            symbolOffset: [0, '-120%']
        }]
    };
    myChart3.setOption(option);
}

7.echars 环形图加外边框

image.png

代码如下:

function mychart1() {
    myChart1 = echarts.init(document.getElementById('profitTotal'));
    let echartData = [{
        name: '费用',
        value: 30, 
    },
    {
        name: '投资',
        value: 70, 
    },];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    option = {
        color:['#03A08C','#1D6CDC'],
        legend: {
            orient: 'vertical', // 'vertical' ,'horizontal'
            x: 'right', // 'center' | 'left' | 'right' | {number}, 
            y: 'center', // 'center' | 'bottom' | {number} 
            padding:[0,80,0,0],
            align:'left',
            textStyle: { //图例文字的样式
                color: '#81ACCF',
                fontSize: 14,
                fontWeight: '100',
            },
            // icon: "rect",   //  字段控制形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
          itemWidth: 18,  // 设置宽度
          itemHeight: 10, // 设置高度
        //   itemGap: 40, // 设置间距
            selectedMode:false,//取消图例上的点击事件
            data:xAxisData,
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['25%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#0A284C',
                    borderWidth: 2,
                },
                label: {
                    normal: {
                        position: 'inner',
                        show : false,
                        formatter:'{c}%'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:echartData,
            },
            {
                name: '外边框',
                type: 'pie',
                radius: ['25%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    normal:{
                        color:function(params){//渐变色
                            var colorList = ['rgba(3, 160, 140, 0.2)','rgba(3, 105, 211, 0.2)'];
                            return colorList[params.dataIndex]
                        },
                        // color:'rgba(62,109,255,0.4)',
                        borderColor: '#0A284C',
                        borderWidth: 2,
                    },
                },
                label: {
                    normal: {
                        position: 'inner',
                        show : true,
                        color:'#ffffff',
                        formatter:'{c}%'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:echartData,
            }]
    };
    myChart1.on('mouseover', 'series.pie',function(params) {
        myChart1.dispatchAction({
            type: 'highlight',
            dataIndex: params.dataIndex,
            seriesIndex: 0,
        });
    });
    myChart1.on('mouseout', 'series.pie', function(params) {
        myChart1.dispatchAction({
            type: 'downplay',
            dataIndex: params.dataIndex,
            seriesIndex: 0,
        });
    });
    myChart1.setOption(option);
}

更新~ ~ ~

8.echars 渐变环形图百分比

image.png

代码如下:

<div style="width: 48%;" ref="jdzlkz_echars"></div>
mychart() {
    var mychart = echarts.init(this.$refs.jdzlkz_echars);
    var dataStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            shadowBlur: 0,
            shadowColor: '#203665'
        }
    };
    var data = [
        {
            name: '抽检合格率',
            value: 90
        }
    ]
    option = {
        // backgroundColor: "#20263f",
        series: [{
            name: '第一个圆环',
            type: 'pie',
            clockWise: false,
            radius: [60, 70],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [
                {
                    value: data[0].value,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#42A2F8',
                                    align: 'center',
                                    fontSize: 20,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#3CA0FF',
                                    align: 'center',
                                    fontSize: 16
                                }
                            },
                            formatter: function(params){
                                console.log(params)
                                // return "{a|"+params.value+"%}"+"\n\n{b|抽检合格率}";
                                return "{a|"+params.value+"%}"+"\n\n{b|"+data[0].name+"}";
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            // color: '#2c6cc4',
                            // shadowColor: '#2c6cc4',
                            // color: '#FFD52D',
                            color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(255, 213, 45, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(60, 160, 255, 1)'
                                }]),
                            shadowColor: '#FFD52D',
                            shadowBlur: 0
                        }
                    }
                }, {
                    value: 100 - data[0].value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            // color: '#3CA0FF'
                            color: '#E1E8EE'
                        },
                        emphasis: {
                            // color: '#3CA0FF'
                            color: '#E1E8EE'
                        }
                    }
                }
            ]
        }]
    }
    mychart.clear();
    mychart.setOption(option);
    window.addEventListener("resize", function () {
        mychart.resize();
    });
},

9.echars 环形图百分比带指针仪表盘效果

image.png

代码如下:

<div id="aqglpie" style="width: 100%;height: 55%;"></div>
mychart() {
    var chartDom = document.getElementById('aqglpie');
    var mychart = echarts.init(chartDom);
    var placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: "rgba(0,0,0,0)",
            borderWidth: 0
        },
        emphasis: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0
        }
    };
    var dataStyle = {
        normal: {
            formatter: '{c}%',
            position: 'center',
            show: true,
            textStyle: {
                fontSize: '15',
                fontWeight: 'normal',
                color: '#34374E'
            }
        }
    };
    option = {
        // backgroundColor: '#fff',
        title: [{
            text: '安全大检查',
            left: '20%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: '16',
                color: '#333333',
                textAlign: 'center',
            },
        }, {
            text: '专项检查',
            left: '50%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
                color: '#333333',
                fontWeight: 'normal',
                fontSize: '16',
                textAlign: 'center',
            },
        }, {
            text: '重大安全隐患',
            left: '80%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
                color: '#333333',
                fontWeight: 'normal',
                fontSize: '16',
                textAlign: 'center',
            },
        }],
        //第一个图表
        series: [
            {
                type: 'pie',//底圆
                hoverAnimation: false, //鼠标经过的特效
                // radius: ['25%', '30%'],
                radius: ['35%', '40%'],
                center: ['20%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: '#E1E8EE'
                            }
                        },
                    }, {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    },

                ]
            },
            //上层环形配置
            {
                type: 'pie',
                hoverAnimation: false, //鼠标经过的特效
                radius: ['35%', '40%'],
                center: ['20%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                        value: 85,//值
                        itemStyle: {
                            normal: {
                                // color: '#54DA99',
                                color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(15, 220, 120, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(84, 218, 153, 1)'
                                }]),
                            }
                        },
                        label: dataStyle,
                    }, {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    },
                ]
            },
            // 外层
            {
                type: 'gauge',//外层光 
                radius: '50%',
                // center: ['center', 'center'],
                center: ['20%', '50%'],
                min: 0,
                max: 100,
                splitNumber: 6, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                // 坐标轴线
                show: false,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    width: 0,
                    // shadowColor: '#67FFFC',
                    shadowBlur: 2,
                    // color: [
                    //     [0, '#FF8F8F '],
                    //     [0.8, ' #FF8F8F'],
                    //     // [0.9, ' #FF8F8F'],
                    // ],
                    color: [
                        [0, '#54DA99'],
                        [0.8, ' #54DA99'],
                        // [0.9, ' #FF8F8F'],
                    ],
                },
                },
                axisTick: {
                // 坐标轴小标记
                length: 4, // 属性length控制线长
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'auto',
                    width: 1,
                },
                },
                axisLabel: {
                show: false,
                },
                splitLine: {
                // 分隔线
                length: -5,
                lineStyle: {
                    color: 'auto',
                    width: 1,
                },
                },
                title: {
                textStyle: {
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                },
                },
                // 指针
                pointer: {
                show: false,
                length: '70%',
                width: '4%',
                },
                detail: {
                show: false,
                },
            },

            //第二个图表
            {
                type: 'pie',
                hoverAnimation: false,
                radius: ['35%', '40%'],
                center: ['50%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: '#E1E8EE'


                            }
                        },

                    }, {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    },

                ]
            },

            //上层环形配置
            {
                type: 'pie',
                hoverAnimation: false,
                radius: ['35%', '40%'],
                center: ['50%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                        value: 30,
                        itemStyle: {
                            normal: {
                                // color: '#8B9FE5',
                                color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(139, 159, 229, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(160, 195, 232, 1)'
                                }]),
                            }
                        },
                        label: dataStyle,
                    }, {
                        value: 55,
                        itemStyle: placeHolderStyle,
                    },

                ]
            },

            // 外层
            {
                type: 'gauge',//外层光 
                radius: '50%',
                center: ['50%', '50%'],
                min: 0,
                max: 100,
                splitNumber: 6, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                // 坐标轴线
                show: false,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    width: 0,
                    // shadowColor: '#67FFFC',
                    shadowBlur: 2,
                    color: [
                    [0, '#A0C3E8 '],
                    [0.8, ' #A0C3E8'],
                    // [0.9, ' #FF8F8F'],
                    ],
                },
                },
                axisTick: {
                // 坐标轴小标记
                length: 4, // 属性length控制线长
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'auto',
                    width: 1,
                },
                },
                axisLabel: {
                show: false,
                },
                splitLine: {
                // 分隔线
                length: -5,
                lineStyle: {
                    color: 'auto',
                    width: 1,
                },
                },
                title: {
                textStyle: {
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                },
                },
                // 指针
                pointer: {
                show: false,
                length: '70%',
                width: '4%',
                },
                detail: {
                show: false,
                },
            },
            //第三个图表
            {
                type: 'pie',
                hoverAnimation: false,
                radius: ['35%', '40%'],
                center: ['80%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: '#E1E8EE'


                            }
                        },

                    }, {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    },

                ]
            },

            //上层环形配置
            {
                type: 'pie',
                hoverAnimation: false,
                radius: ['35%', '40%'],
                center: ['80%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                        value: 30,
                        itemStyle: {
                            normal: {
                                // color: '#FF918D',
                                color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(255, 145, 141, 1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 139, 145, 1)'
                                }]),
                            }
                        },
                        label: dataStyle,
                    }, {
                        value: 55,
                        itemStyle: placeHolderStyle,
                    },

                ]
            },

            // 外层
            {
                type: 'gauge',//外层光 
                radius: '50%',
                center: ['80%', '50%'],
                min: 0,
                max: 100,
                splitNumber: 6, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                // 坐标轴线
                show: false,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    width: 0,
                    // shadowColor: '#67FFFC',
                    shadowBlur: 2,
                    color: [
                    [0, '#FF8B91 '],
                    [0.8, ' #FF8B91'],
                    // [0.9, ' #FF8F8F'],
                    ],
                },
                },
                axisTick: {
                // 坐标轴小标记
                length: 4, // 属性length控制线长
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'auto',
                    width: 1,
                },
                },
                axisLabel: {
                show: false,
                },
                splitLine: {
                // 分隔线
                length: -5,
                lineStyle: {
                    color: 'auto',
                    width: 1,
                },
                },
                title: {
                textStyle: {
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                },
                },
                // 指针
                pointer: {
                show: false,
                length: '70%',
                width: '4%',
                },
                detail: {
                show: false,
                },
            },
        ]
    };
    mychart.clear();
    mychart.setOption(option);
    window.addEventListener("resize", function () {
        mychart.resize();
    });
},
后续有再遇到其他的会持续更新记录😊~~~
目录
相关文章
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
263 0
|
6月前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
7月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
144 0
Echarts饼状图标题位置的设置
Echarts饼状图标题位置的设置
245 0
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
64 0
echarts关于自定义饼图数据刷新和颜色渲染问题
echarts关于自定义饼图数据刷新和颜色渲染问题
210 0
|
XML JSON 数据可视化
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
589 0
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
|
数据可视化 定位技术
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)2
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
542 0
怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)2
echarts两个折线图共用x轴且合并tooltip功能代码
echarts两个折线图共用x轴且合并tooltip功能代码
448 0
|
JavaScript 前端开发
vue中使用echarts实现动态图表多数据展示,带源码(x轴动态时间刷新,实时更新展示数据)
之前写项目,需要写一个图表动态展示出当前服务器的信息,在网上找了很多相关的文章,但是关于vue中使用echarts动态图表的内容比较少,自己写过之后就在这里记录一下,希望能够对大家有所帮助
917 0
vue中使用echarts实现动态图表多数据展示,带源码(x轴动态时间刷新,实时更新展示数据)