echarts图一般的样式属性，可以继续向里面进行添加

 <div>
      <p>
        柱条的样式-----itemStyle: 柱条的颜色（color）；
        柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
        柱条圆角的半径（barBorderRadius）； 柱条透明度（opacity）；
        阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
      </p>
      <p>
        柱条宽高---barWidth和BarHeight（可以为其设置最大最小的值barMaxWidth，barMinwidth）
      </p>
      <p>
        柱条间距---barGap（不同系列在同一类目的距离
        ）和barCategoryGap（类目与类目的距离）----设置在最后一个柱状图系列上才会生效，并对此坐标系中所有柱状图生效。
      </p>
      <p>
        柱条的背景色-----showBackground:true(开启)，详细的样式设置（backgroundStyle配置）
      </p>
      <p>
        柱条的堆叠----stack（拥有同样 stack 值的系列将堆积在一组）
      </p>
      <p>
        折线图--在折线图的拐点展示对应的数值（label:true）在鼠标放置上面展示对应的数值（emphaize:{label:true}）
      </p>
      <p>折线图的区域背景颜色---areaStyle</p>
      <p>平滑折线图---（smooth:true）</p>
      <p>阶梯线图---(step :'start'/'middle' / 'end'，</p>
    </div>
    <div>
      <p>饼图---系列值(series:pie)</p>
      <p>饼图半径---(radius:百分比/number值)</p>
      <p>数据和为0的时候不显示饼图----（series.stillShowZeroSum=false）</p>
      <p>圆环图---（radius:['内半径':'外半径']）</p>
      <p>
        <span>圆环图中间显示高亮扇形对应的文字（默认用扇形颜色显示数据的name）</span>
        <span @click="implementation">具体实现大概是： </span>
      </p>
    </div>
    <div>
      <p>散点图-----系列值(series:scatter)</p>
      <p>
        点的形状（symbol：'echarts内置形状'/'自定义图片'/'svg的路径'）
        1·内置形状---（'circle（原）''rect（矩）''roundRect（圆角矩）''triangle（三角）''diamond（菱）''pin（大头针）''arrow（箭头）'）
        2·自定义图片---（image://绝对地址、网络地址）
        3·svg图片-----（path://svg的值）路径的查看方法为，打开一个 SVG 文件，找到形如
        <path d="M51.911,16.242C51.152,7.888,.013l18.11.97,16.611,51.911,16.242z"></path>
        的路径，将 d 的值添加在 'path://' 后即可。
      </p>
      <p @click="symbalSizeFun">
        点的大小---（symbalSize:number/["宽px","高px"]）
      </p>
    </div>
    <div>
      <p>富文本标签--rich</p>
    </div>
     implementation() {
      let params = {
        series: [
          {
            type: 'scatter',
            data: [220, 182, 191, 234, 290, 330, 310],
            options: {
              label: false, //刚开始lebel展示为空
              emphaise: {
                show: true, //展示高亮区域
              },
            },
            emphaise: {
              //在高亮的时候展示标签
              label: {
                show: true,
                fontSize: 20,
                color: '#555555',
              },
            },
          },
        ],
      }
    },
    symbalSizeFun() {
      let params = {
        series: [
          {
            type: 'scatter',
            data: [220, 182, 191, 234, 290, 330, 310],
            symbolSize: function(value) {
              return value / 10
            },
          },
        ],
      }
    },

1. 折线图（主要针对）

  grid: {
          bottom: '0%',
          top: '23%',
          right: '3%',
          left: '3%',
          containLabel: true, //echarts是否都被包含在canvas图的大小里
        },
        legend: {
          icon: 'square', //图例的样式，分为square，circle,默认跟随series的symbol属性值
          selectedMode: false, // 取消图例上的点击事件
          data: typeName,
          right: '20',
          top: '5',
          itemWidth: 9,
          itemHeight: 9,
          textStyle: {
            //图例里面文字的样式（大小，颜色，粗细）
            color: '#959ABB',
            fontSize: 12,
          },
        },
        // 提示框组件，用于配置鼠标滑过或点击图表时的显示框
        tooltip: {
          trigger: 'axis', ///触发类型 ->'axis'坐标轴触发；'none'：什么都不触发;'item'图形触发：散点图，饼图等无类目轴的图表中使用；
          axisPointer: {
            // 坐标轴指示器配置项。
            type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          showContent: true, //是否显示提示框浮层，默认显示。
          // 一般情况下是提示框展示的文本内容
          formatter: function(params) {
            var relVal = "<div style='text-align:center;'>" + params[0].name + '</div>'
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                '<br/>' +
                "<div style='margin-top:-20px;display:flex;justify-content:space-between;align-items:center;'><span>" +
                params[i].marker +
                params[i].seriesName +
                '：</span><span>' +
                params[i].value +
                suffix[i] +
                '</span></div>'
            }
            return relVal
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false, // 从刻度0开始
            data: xData,
            axisLine: {
              // x轴线的样式(颜色，粗细)
              lineStyle: {
                color: '#314977',
              },
            },
            axisLabel: {
              // x轴刻度的样式(颜色，粗细)
              interval: 0, //x轴刻度之间相隔几个值
              textStyle: {
                color: '#959ABB',
              },
            },
            axisTick: {
              // x轴的刻度分割线是否展示
              show: false,
            },
            splitLine: {
              //  x轴的刻度延伸线是否展示
              show: false,
            },
          },
        ],
        yAxis: [
          {
            show: true,
            type: 'value',
            name: suffix[0], //y轴的单位
            minInterval: 1,
            position: 'left', //y轴的位置(右y轴，左y轴)
            nameTextStyle: {
              //y轴的单位的样式
              align: 'right',
              padding: [0, 5],
              color: '#959abb',
            },
            axisLine: {
              // y轴刻度的样式(颜色，粗细)
              lineStyle: {
                color: '#314977',
                shadowOffsetY: -25,
                shadowColor: '#314977',
              },
              show: true,
            },
            axisTick: { show: false },
            splitLine: {
              show: false,
            },
            splitArea: { show: false }, // 保留网格区域
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#959ABB',
              },
            },
          },
          {
            show: rightY,
            type: 'value',
            name: suffix[1],
            position: 'right',
            nameTextStyle: {
              align: 'left',
              padding: [0, 5],
              color: '#959abb',
            },
            axisLine: {
              lineStyle: {
                color: '#314977',
                shadowOffsetY: -25,
                shadowColor: '#314977',
              },
              show: true,
            },
            axisTick: { show: false },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#314977',
              },
            },
            splitArea: { show: false }, // 保留网格区域
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#959ABB',
              },
            },
          },
        ],
        color: '#f4a64b',
        series: [
          {
            name: typeName[0],
            type: 'line', //echarts图的类型
            symbolSize: 1, //echarts图上的标记点的大小
            symbol: 'circle', //echarts图上的标记点
            smooth: true, //折线图是否展示为圆滑的曲线
            lineStyle: {
              //折线图线条的颜色
              normal: {
                color: colorList[0],
              },
            },
            itemStyle: {
              //该条折线图悬浮框的颜色
              color: colorList[0],
            },
            areaStyle: {
              //折线图内区域的颜色
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colorOffset[0]),
              },
            },
            data: countTodayTrfc,
          },
          {
            name: typeName[1],
            type: 'line',
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: yAxisIndex,
            itemStyle: {
              color: colorList[1],
            },
            lineStyle: {
              normal: {
                color: colorList[1],
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colorOffset[1], false),
              },
            },
            data: countYtdTrfc,
          },
        ],