折线图

作者: wangtieshan | 来源:发表于2020-09-17 01:14 被阅读0次
    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;
      }
    

    相关文章

      网友评论

          本文标题:折线图

          本文链接:https://www.haomeiwen.com/subject/peonektx.html