echarts图表 折线图样式

项目中遇到的一些样式需求:
1.对网格线样式修改;
2.对坐标轴线,文字的样式修改;
3.对图例组件legend样式的修改;
4.对折线样式的修改;
5.y轴单位样式.

样式展示:

代码:

var chartDom = document.getElementById('main');
var echart = echarts.init(chartDom, 'dark'); //dark ,深色主题
var option = {
  tooltip: {
    trigger: 'axis',
  },
  color: ['#0078ff', '#00ffcc'], //两条折线的颜色
  legend: {
    data: [
      {
        name: '隐患排查',
        icon: 'circle', // 图例的图标样式
 
      },
      {
        name: '治理数',
        icon: 'circle',
      },
    ],
    top: '10%',
    right: '10%',
    textStyle: { //图例的文字样式
      color: '#fff',
    },
  },

  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: ['2月28', '3月01', '3月02', '3月03', '3月04', '3月05', '3月06'],
    // 轴线的字体样式
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: '0.16rem',
        // fontSize: 16, 可直接写数字,单位px
      },
    },
    // 轴线的样式
    axisLine: {
      lineStyle: {
        color: '#273169',
      },
    },
    // 网格线样式
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#273169'],
      },
    },
    axisTick: {
      show: false, // 不显示坐标轴刻度
    },
  },
  yAxis: {
    type: 'value',
    name: '个', // y轴的单位,不写就没有
    nameTextStyle: { //单位'个'的样式
      color: '#fff',
      padding: [0, 0, 0, -56], // 用来移动单位的位置对齐
    },
    axisLabel: { 
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: '0.16rem',
      },
      margin: 18, //轴线上的文字与线的距离
    },
    axisLine: {
      lineStyle: {
        color: '#273169',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#273169'],
      },
    },
  },
  series: [
    {
      name: '隐患排查',
      type: 'line',
      data: [34, 44, 35, 38, 41, 37, 39],
      // symbol:'none',
      /*
symbol:拐弯的那个节点的样式
值:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
具体啥样子,我每次都是挨个试的.
*/
      areaStyle: { // 要加这个属性,折线与下方的区域才能填充颜色
        // color: 'red', // 可以直接填充颜色
        color: { // 这边是设置渐变色,好看一点
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(0,156,255,0.5)',
            },
            {
              offset: 0.5, //这是于下方线的距离,设置1就不留空隙
              color: 'rgba(0,156,255,0)',
            },
          ],
          global: false,
        },
      },
    },
    {
      name: '治理数',
      type: 'line',
      data: [18, 21, 15, 20, 10, 18, 12],
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(0,255,133,0.5)',
            },
            {
              offset: 0.9,
              color: 'rgba(0,255,133,0)',
            },
          ],
          global: false,
        },
      },
    },
  ],
}
echart.setOption(option)

我这个项目,背景色是透明色,没实现,如果背景色不透明,可以在legend里面加上
itemStyle: {
color:'black', // 实心圆的颜色,跟背景色相同
borderColor:'#fff',
borderWidth:'2'
}
这样子用实心圆实现空心圆效果