echarts好看的折线图配置_echarts 好看的折线图-CSDN博客

本文链接：https://blog.csdn.net/qq_38948398/article/details/110233013

Echarts效果图：(主要仿制layui官网的echarts图形示例)

代码配置，直接放入echarts示例官网，即可查看效果

option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 3,
              color: '#019688',
            },
          },
        },
        grid: {
          left: '4%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        color: ['#019688', '#119AC2'],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2020-10-01 12:00:00', '2020-10-01 13:00:00', '2020-10-01 14:00:00', '2020-10-01 15:00:00',
              '2020-10-01 16:00:00', '2020-10-01 17:00:00', '2020-10-01 18:00:00', '2020-10-01 19:00:00',
              '2020-10-01 20:00:00', '2020-10-01 21:00:00', '2020-10-01 22:00:00', '2020-10-01 23:00:00'],
            // axisLabel: {
            //   rotate: 25,
            // },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: 'solid',
                color: 'rgba(226,226,226,0.5)',
              },
            },
            axisTick: { // 轴刻度线
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '浓度数据',
            max: 0.5,
            interval: 0.1,
            axisTick: { // 轴刻度线
              show: false,
            },
            // 刻度文字颜色
            axisLabel: { color: '#808080' },
            // y轴刻度设置
            axisLine: {
              lineStyle: {
                width: 2,
                color: '#019688',
              },
            },
            // y轴分隔线设置
            splitLine: {
              lineStyle: {
                color: 'rgba(226,226,226,0.5)',
              },
            },
            // y轴分隔区域设置
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.3)', 'rgba(226,226,226,0.3)'],
              },
            },
          },
          {
            type: 'value',
            name: '测量原始值',
            min: 0,
            max: 10,
            interval: 2,
            axisTick: { // 轴刻度线
              show: false,
            },
            axisLabel: { color: '#808080' },
            axisLine: {
              lineStyle: {
                width: 2,
                color: '#019688',
              },
            },
            // y轴分隔线设置
            splitLine: {
              lineStyle: {
                color: 'rgba(226,226,226,0.5)',
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.3)', 'rgba(226,226,226,0.3)'],
              },
            },
          },
        ],
        series: [
          {
            name: '浓度数据',
            type: 'line',
            data: [0.2, 0.049, 0.07, 0.23, 0.25, 0.07, 0.15, 0.162, 0.32, 0.2, 0.06, 0.33],
            smooth: true,
            symbolSize: 6,
            areaStyle: {},
            itemStyle: {
              borderWidth: 2,
            },
          },
          {
            name: '测量原始值',
            type: 'line',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 6.4, 8.7, 0.7, 5.6, 2.2, 0.4, 0.18, 0.24, 0.25],
            smooth: true,
            symbolSize: 6,
            areaStyle: {},
            itemStyle: {
              borderWidth: 2,
            },
          },
        ],
      };