【echarts】修改柱状图颜色

迈不过友情╰ 2022-06-17 20:09 254阅读 0赞

# 创建一个柱状图对象 #

# js设置树形 #

//柱状图
        var barGragh = document.getElementById('barGragh');
        var barChart = echarts.init(barGragh);
        var barChartoption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['上周同比', '今日整点'],
                /* y : 'bottom' */
            },
            toolbox: {
                show: false,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            color : ['#ff7f50','#87cefa', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            calculable: true,
            grid: {
                left: '0%',
                right: '0%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel:{
                        interval:0,
                        rotate:30,
                        margin:15,
                        textStyle:{
                          color:"#222"
                        }
                  },
                  data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: 'GMV'
                }
            ],
            series: [
                {
                    name: '上周同比',
                    type: 'bar',
                    barMaxWidth: '100',
                    data: [],
                    markPoint: {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: "{b}\n¥{c}",
                                    textStyle: {
                                        color: '#000'
                                    }
                                },
                                textColor : '#000'
    
                             },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: [
                            {
       type: 'max', name: '上周最大值',},
                            {
       type: 'min', name: '上周最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {
       type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '今日整点',
                    type: 'bar',
                    barMaxWidth: '100',
                    data: [],
                    markPoint: {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: "{b}\n{c}",
                                    textStyle: {
                                        color: '#000'
                                    }
                                },
                                textColor : '#000'
    
                             },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: [
                            {
       type: 'max', name: '今日最大值'},
                            {
       type: 'min', name: '今日最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {
       type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        barChart.setOption(barChartoption);