Echarts-修改x轴 y轴字体颜色、线的颜色、y轴单位字体颜色

Echarts-修改x轴 y轴字体颜色、线的颜色、y轴单位字体颜色,第1张

//var myChart = this.$echarts.init(document.getElementById("echart-container_0")); //vue
var myChart = echarts.init(document.getElementById("echart-container_0"));//jquery 
var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['已投票', "放弃投票"],
            //align: 'left',
            right: 10,
            textStyle: {
                color: "#fff"
            },
            itemWidth: 14,
            itemHeight: 10,
            itemGap: 13,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['1号','18号','22号', '29号'],
            axisLine: {/x轴线的颜色以及宽度
                show: true,
                lineStyle: {
                    color: "#fff",
                    width: 0,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                    color: "#fff",
                }
            },
            splitLine: {//分割线配置
                show:false,
                lineStyle: {
                    color: "#fff",
             }
            }
        }],
        yAxis: [{
            type: 'value',
            name:"单位:个",//y轴上方的单位
            nameTextStyle:{//y轴上方单位的颜色
              color:'#fff'  
            },
            axisLabel: {//y轴文字的配置
                textStyle: {
                     color: "#fff",
                     margin: 15
                },
               // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            },
            axisTick: {
                show: false,
            },
            axisLine: {//y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                    color: "#fff",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {//分割线配置
                show:false,
                lineStyle: {
                    color: "#fff",
                }
            }
        }],
        series: [{
            name: '已投票',
            type: 'bar',
            data: [38,38,42,48],
            barWidth: 10, //柱子宽度
            barGap: .5, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 153, 239, 0.8)'
                    }, {
                        offset: 1,
                        color: 'rgba(66, 187, 255, 1)'
                    }]),
                    opacity: 1,
                }
            }
        }, {
            name: '放弃投票',
            type: 'bar',
            data: [40, 30, 42, 50],
            barWidth: 10,
            barGap: .5,
            itemStyle: {
                normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 242, 159, 1)'
                    }, {
                        offset: 1,
                        color: 'rgba(76, 240, 254, 1)'
                    }]),
                    opacity: 1,
                }
            }
        }]
    };
 
     myChart.setOption(option);
     window.addEventListener("resize", () => {
        myChart.resize();
      });

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1321673.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存