echarts使用小总结

1、扩大图表y轴间的距离，只需要将echarts组件的高度加大就行啦。如：

<div class="echartDatas">
   <nvechart :chartData="echartData" style="height:500px;"></nvechart>
</div>

2、echarts—设置折线图中折线线条颜色和折线点颜色及形状和折线阴影效果。

 https://blog.csdn.net/duyan_s/article/details/78833845

https://www.cnblogs.com/wsir/p/6236677.html

{
  name: "今日",
  type: "line",
  stack: "总量",
  data: [15, 470, 520, 160, 460, 398, 786],
  symbol:'circle',//拐点样式
  symbolSize:8,   //拐点圆的大小
  itemStyle: {
      normal: {
      color: "#02a0ff",//拐点颜色
      borderColor:'#fff',  //拐点边框颜色
      lineStyle: {
         color: "#02a0ff",

　　　　　　 shadowColor : '#96d3f7', //折线阴影颜色

           shadowBlur: 10,//折线阴影值

      }
    }
    }
  },

 3、横坐轴样式修改

yAxis: [
          {
            type: "value",
            splitLine: {//横向坐标轴的线类型:实/虚
              lineStyle: {
                type: "dashed",
                color: "#2f5883"
              }
            }
          }
  ],

 4、基准线(坐标轴指示器)样式设置

 tooltip: {
          trigger: "axis",

          axisPointer: {
            z: 0, //让坐标轴指示器位于拐点下方显示
            //设置
            lineStyle: {
              color: "#ff04eb", //这是鼠标经过时Y轴线样式设置(又称基准线和坐标轴指示器)
              shadowColor: "#fff",
              shadowBlur: 5,
              color: new echarts.graphic.LinearGradient(//基准线设置渐变色
                  0, 1, 0, 0,  
                  [
                      {offset: 1, color: 'rgba(255,5,244,0)'},
                      {offset: 0.8, color: '#ff05f4'},
                      {offset: 0.2, color: '#ff05f4'},
                      {offset: 0, color: 'rgba(255,5,244,0)'}
                  ]               
              )

            },
          }
        },

5、显示下载图表按钮

toolbox: {
          //是否显示下载按钮
          feature: {
            saveAsImage: {
              iconStyle: {
                borderColor: "#fff"
              },
              emphasis: {//鼠标经过时，按钮及文字显示颜色
                iconStyle: {
                  borderColor: "#fff"
                }
              }
            }
          },
          color: "#fff"
},