echarts常见样式汇总

从echarts官网示例拷贝的选项对象往往不能直接使用，因为使用后表现出来也不是官网展示的样式，所以需要给选项对象中添加属性，常见的属性如下：

• 去掉折线上面的小圆点：选项对象中添加属性

symbol: “none",注意是在series属性对象中的折线图对象中添加，而不是在和series属性对象同级的xAxis或者yAxis属性对象中添加，之所以特别说明折线图对象，是因为一个图可能是由柱状图和折线图共同组成，如果添加到柱状图对象中则不生效；

• 使得折线平滑：和上面的一点类似，在series属性对象中的折线图对象中添加属性smooth: true,
• 自由设置图的大小:

grid:{

left: 像素值或者百分比,

}

（top，right，bottom同理）

• 去掉网格线

xAxis : {
　　splitLine:{
　　　　show:false
　　}
       },

yAxis : {
　　splitLine:{
　　　　show:false
　　}
       }

注意：如果设置了两个y轴，则每个y轴对应的对象中都需要添加，如：

yAxis: [

          {

            type: "value",

            name: "水量",

            min: 0,

            max: 250,

            interval: 50,

            axisLabel: {

              formatter: "{value} ml",

            },

            splitLine: {

              show: false,

            },

          },

          {

            type: "value",

            name: "温度",

            min: 0,

            max: 25,

            interval: 5,

            axisLabel: {

              formatter: "{value} °C",

            },

            splitLine: {

              show: false,

            },

          },

        ],

设置了两个y轴分别显示水量和温度，都添加了splitLine属性

• 统一设置图例为圆角矩形，举例：（折线图默认图例是线上一点，柱状图默认是圆角矩形）

legend: {

          data: [

            { name: "收入", icon: "roundRect" },

            { name: "目标", icon: "roundRect" },

            { name: "达成率", icon: "roundRect" },

          ],

 },

• 设置折线图向下区域渐变

需要在series的折线图对象中添加areaStyle属性，格式实例如下：

       areaStyle: {

              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [

                {

                  offset: 0,

                  color: "rgba(255, 182, 83, 0.2)",

                },

                {

                  offset: 1,

                  color: "rgba(255, 182, 83, 0)",

                },

              ]),

            },

相关颜色在设计稿中会给出

• 设置折线粗细：在series的折线图对象中添加如

  lineStyle: {

                width: 2,

              },