折线图

时间:2022-07-25
本文章向大家介绍折线图,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
initChart(canvas, width, height, dpr) {
    const max = 100;
    const min = 25;
    const interval = 25;
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // 像素
    });
    canvas.setChart(chart);
    let option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
          type: 'none'        // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter(p) {
          return p[0].data.showText
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: ['#ffffff']
            }
          },
          axisLine:{
            lineStyle:{
              color: '#eeeeee'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666'
            }
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#eeeeee'],
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      yAxis: [
        {
          max,
          min,
          type: 'value',
          show: true,
          interval,
          axisTick: {
            show: false
          },
          axisLine: {             // 坐标轴轴线相关设置
            show: false,         // 是否显示坐标轴轴线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666'
            },
            formatter(value) {
              return value + '%'
            }
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#eeeeee'],
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          symbolSize: 8,
          symbol: 'circle',
          type: 'line',
          barWidth: '60%',
          data: [{
            showText: '残值率:20-15万n残值估算:8家',
            name: 'hello',
            value: 75
          }, 100, 80, 45, 65],
          lineStyle: {
            color: '#00B8B0',
            lineWidth: 2
          },
          itemStyle: {
            color: '#00B8B0'
          },
          areaStyle: {
            normal: {
              label: {
                show: false,
              },
              color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
                offset: 0,
                color: '#00B8B0'
              }, {
                offset: 1,
                color: '#ffffff'
              }])
            }
          }
        }
      ],

    };
    chart.setOption(option);
    this.eChart = chart;
    return chart;
  }