project-neic/src/components/focus/multiple-line-chart.vue

<template>
  <div class="chart" id="showEchart"></div>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    name: "multiple-line-chart",
    componentName: "multiple-line-chart",
    data() {
      return {
        id: "",
        chart: null,
      };
    },
    methods: {
      initChart(chartData) {
        let chartDom = document.getElementById('showEchart');
        let myChart = echarts.init(chartDom, '#ffffff');
        let option = {
          legend: {
            show: true,
            data: chartData.value.map((t) => {
              return t.title;
            }),
            right: 56,
            icon: "circle",
            itemWidth: 6,
            inactiveColor: '#606769',
            textStyle: {
              color: '#B3BDC0',
              fontSize: 12,
            },
          },

          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                // interval: 60,
                showMinLabel: true,
                showMaxLabel: true,
                formatter: "{value}",
                fontSize: 14,
                textStyle: {
                  color: '#606769',
                },
              },
              axisLine: {
                show: false,
              },
              data: chartData.value[0].value.map(items => {
                return items.text;
              }),
            },
          ],
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: "{value}",
              fontSize: 14,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#606769',
                type: "dashed",
              },
            },
          },
          dataZoom: [
            {
              show: false,
              type: 'inside',
              start: 0,
              end: 100
            },
          ],
          series: [{
            name: chartData.value[0].title,
            smooth: true,
            showSymbol: false,
            data: chartData.value[0].value.map(items => {
              return items.value;
            }),
            type: 'line',
            lineStyle: {
              normal: {
                color: 'rgba(75, 85, 174, 1)',
                width: 1,
              },
            },
          },
          {
            name: chartData.value[1].title,
            smooth: true,
            showSymbol: false,
            data: chartData.value[1].value.map(items => {
              return items.value;
            }),
            type: 'line',
            lineStyle: {
              normal: {
                color: 'rgba(05, 187, 76, 1)',
                width: 1,
              },
            },
          }]
        };
        option && myChart.setOption(option);
      },
    },
  };
</script>

<style lang="less">
  .chart {
    width: 1050px;
    height: 40vh;
  }
</style>