echarts配置总结

最新推荐文章于 2024-05-04 20:46:30 发布
最新推荐文章于 2024-05-04 20:46:30 发布
阅读量337 收藏 1
点赞数 1
分类专栏： echarts3-0 js 文章标签： echarts-数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bsdbqling/article/details/77748810
版权
  • 简洁的柱状图（一）直接复制即可运行
    // 基于准备好的dom，初始化echarts实例
    var myChart11 = echarts.init(document.getElementById('first'));
    // 指定图表的配置项和数据
    option = {
        color: '#fff',
        //        title: {
        //            x: 'center',//标题居中
        //            text: 'ECharts例子个数统计',
        //            subtext: 'Rainbow bar example',
        //            link: 'http://echarts.baidu.com/doc/example.html'
        //        },
        tooltip: {//触发提示，及弹出的数据框
            trigger: 'item'
        },

        //        toolbox: {
        //            show: true,
        //            feature: {
        //                dataView: { show: true, readOnly: false },
        //                restore: { show: true },
        //                saveAsImage: { show: true }
        //            }
        //        },
        calculable: true,
        grid: {//边距
            borderWidth: 0,
            x: 20,
            x2: 40,
            y: 20,
            y2: 40
        },
        xAxis: [
        {
            type: 'category',//轴类型（value，category，time）
            splitLine: { show: false },//坐标轴线
            axisTick: { show: false },//坐标轴刻度
            axisLabel: {//x轴旋转文字
                interval: 0
                //rotate: -50
            },
            type: 'category',
            show: true,
            data: [{ value: '张晓红', textStyle: { color: 'rgb(222,222,222)',borderWidth:[3,4,5,6]} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },//\n错位显示
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n黄晓明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李大刚', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n桥大幅', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '李和明', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n张晓红', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '小敏', textStyle: { color: 'rgb(222,222,222)'} },
                    { value: '\n何晓明', textStyle: { color: 'rgb(222,222,222)'}}]
        }
    ],
        yAxis: [
        {
            type: 'value',
            show: true,
            splitLine: { show: false },//同上
            axisTick: { show: false },//同上
            axisLabel: {//y轴文字
                show: true,
                textStyle: {
                    color: 'rgb(170,170,170)'
                }
            }
        }
    ],
        series: [
        {
            name: '接警员：',
            type: 'bar',
            label: { normal: { show: true,//显示顶部具体数值
                position: 'top'
            }
            },
            itemStyle: {
                normal: {
                    color: function (params) {
                        // build a color map as your need.
                        var colorList = [
                           '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                            '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                             '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                              '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                               '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                                '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                                 '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD',
                                  '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD', '#27727B', '#60C0DD'
                        ];
                        return colorList[params.dataIndex]
                    }
                }
            },
            data: [12, 15, 10,
             4, 12, 5, 6, 5, 25, 23, 7, 12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7,
            12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7],

            markLine: {//平均值及配置
                lineStyle: {
                    normal: { color: 'rgb(200,200,200)' }
                },
                //                平均值线条颜色
                label: { normal: { position: 'end'} },
                data: [
                    { type: 'average', name: '平均值' },
                ]

            },
            markPoint: {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function (params) {
                        return '<img src="'
                                + params.data.symbol.replace('image://', '')
                                + '"/>';
                    }
                },
                data: [
                    { xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'image://../asset/ico/折线图.png' },
                    { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'image://../asset/ico/柱状图.png' },
                    { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'image://../asset/ico/散点图.png' },
                    { xAxis: 3, y: 350, name: 'K', symbolSize: 20, symbol: 'image://../asset/ico/K线图.png' },
                    { xAxis: 4, y: 350, name: 'Pie', symbolSize: 20, symbol: 'image://../asset/ico/饼状图.png' },
                    { xAxis: 5, y: 350, name: 'Radar', symbolSize: 20, symbol: 'image://../asset/ico/雷达图.png' },
                    { xAxis: 6, y: 350, name: 'Chord', symbolSize: 20, symbol: 'image://../asset/ico/和弦图.png' },
                    { xAxis: 7, y: 350, name: 'Force', symbolSize: 20, symbol: 'image://../asset/ico/力导向图.png' },
                    { xAxis: 8, y: 350, name: 'Map', symbolSize: 20, symbol: 'image://../asset/ico/地图.png' },
                    { xAxis: 9, y: 350, name: 'Gauge', symbolSize: 20, symbol: 'image://../asset/ico/仪表盘.png' },
                    { xAxis: 10, y: 350, name: 'Funnel', symbolSize: 20, symbol: 'image://../asset/ico/漏斗图.png' },
                ]
            }
        }
    ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart11.setOption(option);
  • 简洁的柱状图（二）
option = {
    title: {
        x: 'center',
        text: 'ECharts例子个数统计',
        subtext: 'Rainbow bar example',
        link: 'http://echarts.baidu.com/doc/example.html'
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    grid: {
        borderWidth: 0,
        y: 80,
        y2: 60
    },
    xAxis: [
        {
            type: 'category',
            show: false,
            data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel']
        }
    ],
    yAxis: [
        {
            type: 'value',
            show: false
        }
    ],
    series: [
        {
            name: 'ECharts例子个数统计',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            data: [12,21,10,4,12,5,6,5,25,23,7],
            markPoint: {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function(params){
                        return '<img src="' 
                                + params.data.symbol.replace('image://', '')
                                + '"/>';
                    }
                },
                data: [
                    {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: 'image://../asset/ico/折线图.png'},
                    {xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: 'image://../asset/ico/柱状图.png'},
                    {xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: 'image://../asset/ico/散点图.png'},
                    {xAxis:3, y: 350, name:'K', symbolSize:20, symbol: 'image://../asset/ico/K线图.png'},
                    {xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: 'image://../asset/ico/饼状图.png'},
                    {xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: 'image://../asset/ico/雷达图.png'},
                    {xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: 'image://../asset/ico/和弦图.png'},
                    {xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://../asset/ico/力导向图.png'},
                    {xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://../asset/ico/地图.png'},
                    {xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://../asset/ico/仪表盘.png'},
                    {xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
                ]
            }
        }
    ]
};
  • 标准柱状图
    // 基于准备好的dom，初始化echarts实例
    var myChart6 = echarts.init(document.getElementById('ZZT'));

    // 指定图表的配置项和数据
option = {
//    title : {
//        text: '某地区蒸发量和降水量',
//        subtext: '纯属虚构'
//    },
        grid:{
        left:'10%',
        right:'7%',
        top:'15%',
        bottom:'10%'
        },
    tooltip : {
        trigger: 'axis'
    },
           color: ['rgb(0,128,229)', 'rgb(37,196,0)', 'rgb(255,175,40)'],
    legend: {
        data:['本周','同比','环比'],
                    textStyle:{color:'rgb(222,222,222)'}
    },
//    toolbox: {
//        show : true,
//        feature : {
//            dataView : {show: true, readOnly: false},
//            magicType : {show: true, type: ['line', 'bar']},
//            restore : {show: true},
//            saveAsImage : {show: true}
//        }
//    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data :  [JsonValue.mc0,JsonValue.mc1,JsonValue.mc2,JsonValue.mc3],

            axisLabel:{
                show:true,
                textStyle:{
                color:'rgb(222,222,222)'
                }
            }

        }
    ],
    yAxis : [
        {
            type : 'value',

                        axisLabel:{
                show:true,
                textStyle:{
                color:'rgb(222,222,222)'
                }
            }
        }
    ],
    series : [
        {
            name:'本周',
            type:'bar',
            data:[JsonValue.sum0, JsonValue.sum1, JsonValue.sum2, JsonValue.sum3],
            markPoint : {
                data : [
//                    {type : 'max', name: '最大值'},
//                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
//                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'同比',
            type:'bar',
            data:[JsonValue.sum4, JsonValue.sum5, JsonValue.sum6, JsonValue.sum7],
            markPoint : {
                data : [
//                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
//                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
//                    {type : 'average', name : '平均值'}
                ]
            }
        },
        {
            name:'环比',
            type:'bar',
            data:[JsonValue.sum8, JsonValue.sum9, JsonValue.sum10, JsonValue.su11],
            markPoint : {
                data : [
//                    {type : 'max', name: '最大值'},
//                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
//                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};
  • 标准饼图
    // 基于准备好的dom，初始化echarts实例
    var myChart4 = echarts.init(document.getElementById('BZT'));


    // 指定图表的配置项和数据
    var option = {
//        title: {
//            text: '肥市公安局',
//            subtext: '数据分析',
//            x: 'center'
//        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['rgb(0,128,229)', 'rgb(98,156,255)', 'rgb(183,110,253)', 'rgb(251,70,85)', 'rgb(255,106,40)',
                'rgb(255,175,40)', 'rgb(37,196,0)', 'rgb(0,128,229)', 'rgb(98,156,255)', 'rgb(183,110,253)', 'rgb(251,70,85)'],
        legend: {
//            left: 'left',
            bottom: '0',
            width:'100%',
            data: [data.name0, data.name1, data.name2, data.name3, data.name4, data.name5, data.name6, data.name7, data.name8, data.name9, data.name10],
            textStyle:{color:'rgb(222,222,222)'}
        },
        series: [
        {
            name: '案件名称：',
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: [
                { value: data.value0, name: data.name0 },
                { value: data.value1, name: data.name1 },
                { value: data.value2, name: data.name2 },
                { value: data.value3, name: data.name3 },
                { value: data.value4, name: data.name4 },
                { value: data.value5, name: data.name5 },
                { value: data.value6, name: data.name6 },
                { value: data.value7, name: data.name7 },
                { value: data.value8, name: data.name8 },
                { value: data.value9, name: data.name9 },
                { value: data.value10, name: data.name10 },
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option);
  • 标准折线图
    // 基于准备好的dom，初始化echarts实例
    var myChart5 = echarts.init(document.getElementById('ZXT'));



    // 指定图表的配置项和数据

   var option = {
       //        title: {
       //            text: '未来一周气温变化',
       //            subtext: '纯属虚构'
       //        },
       tooltip: {
           trigger: 'axis'
       },
       grid: {
           left: '6%',
           right: '4%',
           top: '15%',
           bottom: '10%'
       },
       legend: {
           data: ['110', '119', '122'],
           textStyle: { color: 'rgb(222,222,222)' }
       },
//       toolbox: {
//           show: true,
//           feature: {
//               mark: { show: true },
//               dataView: { show: true, readOnly: false },
//               magicType: { show: true, type: ['line', 'bar'] },
//               restore: { show: true },
//               saveAsImage: { show: true }
//           }
//       },
       calculable: true,
       xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            //            data: [mydate-6, mydate-5, mydate-4, mydate-3, mydate-2, mydate-1, mydate],
            //data: [JsonValue.sj0, JsonValue.sj3, JsonValue.sj6, JsonValue.sj9, JsonValue.sj12, JsonValue.sj15, JsonValue.sj18],
            data: [JsonValue.sj0, JsonValue.sj3, JsonValue.sj6, JsonValue.sj9, JsonValue.sj12, JsonValue.sj15, JsonValue.sj18],
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgb(222,222,222)'
                }
            }
        }
    ],
       yAxis: [
        {
            type: 'value',
            //            axisLabel: {
            //                formatter: '{value} °C'
            //            }
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgb(222,222,222)'
                }
            }
        }
    ],
       series: [
        {
            name: '110',
            type: 'line',
            itemStyle: { normal: { color: 'rgb(0,128,229)', lineStyle: { color: 'rgb(0,128,229)'}} }, //线条颜色
            data: [JsonValue.sum0, JsonValue.sum3, JsonValue.sum6, JsonValue.sum9, JsonValue.sum12, JsonValue.sum15, JsonValue.sum18],
            markPoint: {
                //                data: [
                //                    { type: 'max', name: '最大值' },
                //                    { type: 'min', name: '最小值' }
                //                ]
            },
            markLine: {
                label:{normal:{position:'start'}},
                data: [
                    { type: 'average', name: '平均值' },
                ]

            }
        },
        {
            name: '119',
            type: 'line',
            itemStyle: { normal: { color: 'rgb(251,70,85)', lineStyle: { color: 'rgb(251,70,85)'}} }, //线条颜色
            data: [JsonValue.sum1, JsonValue.sum4, JsonValue.sum7, JsonValue.sum10, JsonValue.sum13, JsonValue.sum16, JsonValue.sum19],
            markPoint: {
                data: [
                    { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
                ]
            },
            markLine: {
                label:{normal:{position:'start'}},
                data: [
                    { type: 'average', name: '平均值' }
                ]
            }
        },
                {
                    name: '122',
                    type: 'line',
                    itemStyle: { normal: { color: 'rgb(37,196,0)', lineStyle: { color: 'rgb(37,196,0)'}} }, //线条颜色
                    data: [JsonValue.sum2, JsonValue.sum5, JsonValue.sum8, JsonValue.sum11, JsonValue.sum14, JsonValue.sum17, JsonValue.sum20],
                    markPoint: {
                        data: [
                    { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
                ]
                    },
                    markLine: {
                        label:{normal:{position:'start'}},
                        data: [
                    { type: 'average', name: '平均值' }
                ]
                    }
                }
    ]
   };

    // 使用刚指定的配置项和数据显示图表。
    myChart5.setOption(option);
  • 地图（合肥）使用前引用地图js
        // JS合肥地图（带参数）
        var myChart55 = echarts.init(document.getElementById('ZXTFU'));
        var option = {
//            title: {
//                text: '合肥地图',
//                subtext: '人口分布图'
//            },
        geo:{
        left:'0',
        right:'0',
        top:'0',
        bottom:'0',
        layoutSize:900
        },
            tooltip: {
                trigger: 'item'
//                formatter: function (a) {
//                    return 'Legend ' + Date;
//                }
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data: ['人口数']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: '40',
                feature: {
//                    dataView: { readOnly: false },
//                    restore: {},
                    saveAsImage: {}
                }
            },
            dataRange: {
                bottom:'50',
                min: 0,
                max: 1000,
                color: ['orangered','yellow','lightskyblue'],
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            series: [
                {
                    name: '数据名称',
                    type: 'map',
                    mapType: 'hefei',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    selectedMode: 'single',
                    itemStyle: {
                        normal: { label: { show: true},borderWidth:2 },
                        emphasis: { label: { show: true} }
                    },
                    data: [
                        { name: '包河区', value: 924 },
                        { name: '瑶海区', value: 135 },
                        { name: '肥东县', value: 123 },
                        { name: '庐阳区', value: 655 },
                        { name: '长丰县', value: 334 },
                        { name: '蜀山区', value: 546 },
                        { name: '庐江县', value: 245 },
                        { name: '肥西县', value: 234 },
                        { name: '巢湖市', value: 111 }

                    ]
                }
            ]
        };
            myChart55.setOption(option);

本文都是自己写的，喜欢的点个赞，不点赞的运行不了！

bsdbqling
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts相关配置项，总结
weixin_43992935的博客
07-12 498
echarts图标颜色值设置： normal : { color:function(params) { //自定义颜色 var colorList = ['#5580EB','#486CC7', '#F2637B', '#5254CF', '#36CBCB', '#975FE4', '#435188', '#FBD337', '...
echarts配置项
react打断点调试
10-12 593
//长刻度的设置 axisTick: { // 坐标轴小标记 length :3, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: '#fff', shadowColor : '#fff', //默认透明 shadowB...
echarts之title-textAlign （居中）
热门推荐
chelen_jak的专栏
07-20 7万+
原文出处：https://blog.csdn.net/huanbia/article/details/50394515   title是echarts中的标题 名称 类型 默认值 可选值 效果 textAlign string null left’ | ‘right’ | ‘center 标题的水平对齐方式 当textAlign为‘l...
echarts-主标题居中，副标题居右
个人博客
07-05 9143
数组形式设置title
2024年Web前端最全ECharts用法及常用配置项详解（Vue环境），卑微打工人
最新发布
2401_84435700的博客
05-04 662
计时器浏览器定位和导航浏览历史浏览器和屏幕信息对话框错误处理作为window对象属性的文档元素（1）首先使用 npm下载安装 ECharts；（2）在项目的 main.js 文件中引入（此处为全局引入，后续在单个 .vue 页面中无需再引）；//引入import * as Echarts5 from ‘echarts5’ //echarts新版本echarts5//使用//新版本。
Echarts之环形图 && 自定义title居中
c_x_m的博客
11-08 3594
因为我这里是多个环形图 所以 使用了动态绑定html。先上效果图 蓝色发光的环形圈 是背景图片。
echarts各项配置（详细版）
王声声的博客
06-08 5757
Echarts的各种配置。
ECharts基础配置详解
懒羊羊我小弟的博客
07-31 1023
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文主要介绍ECharts的主要功能介绍，安装引用教程、基本图表展示、setOption配置项的详解等。常规的折线图、柱状图、散点图、饼图、K线图基本配置
echarts知识总结
08-05
ECharts知识总结 ECharts是一款基于JavaScript的数据可视化图表库，提供了多种图表类型、交互方式和自定义选项，广泛应用于数据分析、科学研究、商业智能等领域。下面是关于ECharts的一些知识点总结： 一、ECharts...
详解ECharts使用心得总结
09-01
**ECharts 使用心得总结** ECharts 是一个基于 JavaScript 的开源可视化库，由百度开发并维护。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，同时也支持地图的绘制。在本文中，我们将探讨ECharts...
ECharts配置项（内容）.md
04-22
ECharts中配置项总结，方便查看
8.Echarts总结.rar
07-16
适合零基础入手Echarts，有echats的基础配置
echarts基础知识
03-23
ECharts 的基本使用包括引入 echarts.js 文件、准备一个呈现图表的盒子、初始化 echarts 实例对象和准备配置项。用户可以根据需要选择不同的图表类型，如折线图、柱状图、饼图等，并根据需要进行定制。 ECharts 的...
echarts如何使标题title居中
无言非影的博客
11-07 1131
【代码】echarts如何使标题title居中。
Echarts常用配置项
zhangxiaobai___的博客
10-30 4872
echarts常用属性配置，grid内绘图表
ECharts常用配置项学习
Shadow Kylin的博客
01-11 2609
echarts 常用配置项
Echart 的常用配置
zjq_1234的博客
10-12 1675
Echart 的常用配置
echarts-配置集合
m0_53397360的博客
03-24 987
【代码】echarts-配置集合。
【Echarts】配置项归纳
Fulling的博客
06-30 4950
原生图形元素自建，支持的图形元素包括 image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group。dataZoomInside，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、滚轮、手指滑动在缩放或漫游坐标系。数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。区域选择组件，可以选择图中一部分数据，从而便于向用户展示被选中数据、或他们的一些统计计算结果。
总结echarts的常用api以及使用方法
03-23
2. 设置图表的基本配置： ```javascript var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋",...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值