关于echars折线图修改内容

来源：互联网发布：淘宝上论文发表可靠吗编辑：程序博客网时间：2024/06/07 05:16

关于折线图各种颜色的修改

1.轴线颜色样式修改：

                 axisLine : {    // 轴线show: true,
                                        lineStyle: {//轴线颜色样式
                                            color:"#d3d3d3",
                                            type: 'solid',
                                            width: 2
                                        }
                                    },

2.折线颜色和折线上圆点颜色修改：写在在series里

         itemStyle: {
                             normal: {
                                   lineStyle:{//折线颜色
                                  color:"#6bd65a",
                                  },
                              color:"#018ae6",//折线圆点颜色

                                }
                            },

3.虚线颜色，样式和数字的修改：写在在series里

       markLine: {

                                itemStyle: {
                                   normal: {
                                           lineStyle:{//虚线颜色
                                          color:"#6bd65a",
                                          },
                                        color:"#6bd65a",//折线图虚线数字颜色修改
                                        },
                                    },

                                data: [
                                    {type: 'average', name: '平均值',}
                                ],
                                symbol:['none', 'none']//折线图两端去掉样式
                            }

*注意：要保持series与legend的name一致，否则虚线数字的颜色无效

4.折线图所占比例宽度设置：

   grid:{//折线图距离两边的距离
                       x:45,//左
                       y:60,//上
                       /* x2:55,//右
                       y2:40,//下 */
                       width:'220px',
                       height:'110px'
                    },
*注意：可用 x，y（左上）x2，y2（右下），或用width，height直接设置宽高

5.坐标轴统一加单位：写在xAxis或yAxis里

       axisLabel : {//坐标轴文本标签
                                    show:true,
                                    interval: 'auto',    // {number}
                                    formatter: '{value}月',//统一加单位
                                    textStyle: {

                                        fontFamily: 'sans-serif',//设置字体

                                    }
                                },

6.分隔线颜色类型宽度设置：写在xAxis或yAxis里

           splitLine : {//分隔线格线
                                    show:true,
                                    lineStyle: {
                                        color: '#dddddd',//颜色
                                        type: 'solid',//类型
                                        width: 1,//宽度
                                    },
                                },

7.分割段数和坐标轴单位设置：

splitNumber:4,//y轴分割段数

name:'元',//坐标轴单位

8.tooltip提示框传自定义参数问题：

tooltip: {
                    trigger: 'axis',
                     formatter: function (params) {
                         var syb=params[0].data.symbol;
                         if(syb=="none"){
                           return "未预警";
                         }else{
                         var t='环比值：'+(params[0].data.name*100).toFixed(2)+'%';
                         return t;
                         }
                    }
                },

*注意：trigger一定是'axis',

0 0