ECharts 折线图改变title lenendX轴Y轴字体颜色，大小改变（vue引用）

古城微笑少年丶 2022-02-20 03:06 1311阅读 0赞

改变背景，字体,折线颜色，x,y轴颜色，title字体颜色，lenend字体颜色，y轴添加单位后的效果图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]  
原图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]  
代码  
js

mounted(){
             this.powerChart = this.$echarts.init(document.getElementById("Echart"));
             this.electricChart = this.$echarts.init(document.getElementById("Pchart"));
            //  调用方法
             this.drawChart();
       			 },
            // 折线图
             methods:{
            drawChart(){
    
               let option = {
                // 背景图颜色
                backgroundColor:"#0E1F31",
                title: {
                    text: '水 燃气费走势图',
                    textStyle: {
                            fontWeight: 'normal',             
                            color: '#A3FFFC'  //标题颜色
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['水费','燃气费'],
                    top:'9%',
                    textStyle: {
                            fontWeight: 'normal',              
                            color: '#62B4BB'   //legend颜色
                    },
                },
                grid: {
                    // top:'1%',
                    left: '5%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,   
                    data: ['1月','2月','3月','4月','5月','6月','7月'],
                        //  改变x轴颜色
                        axisLine:{
                            lineStyle:{
                                color:'#2A5D75',
                            }
                        },                         
                        //  改变x轴字体颜色和大小  
                         axisLabel: {
                            textStyle: {
                                color: '#62B4BB',
                                fontSize:'16'
                            },
                        },   
                }],
                    
                yAxis: [{
                    type: 'value',
                  //  改变y轴颜色
                        axisLine:{
                            lineStyle:{
                                color:'#2A5D75',
                            }
                        },                         
                        //  改变y轴字体颜色和大小  
                    axisLabel: {
                         formatter: '{value} m³ ', //  给y轴添加单位 
                            textStyle: {
                                color: '#62B4BB',
                                fontSize:'16',
                               
                            },
                        },   
                }],
                series: [                
                         {
                            name:'水费',
                            type:'line',
                            stack: '总量',
                            data:[120, 132, 101, 134, 90, 230, 210],
                            itemStyle:{
                                normal:{
                                    color:'#4e76b5' //  给折线添加颜色 
                                },
                            }, 
                        },
                        {
                            name:'燃气费',
                            type:'line',
                            stack: '总量',
                            data:[220, 182, 191, 234, 290, 330, 310]
                        }
                        ]
                    };
                    //展示图
                this.electricChart.setOption(option_power);
            }
            }

html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220220/7112927a96ea422ea37fb635e7be1f26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]: /images/20220220/0b7b99200fd540b09425c4389f7c5469.png