Echarts折线图

image.png

"echarts": "^5.3.1",

<template>
  <div id="echarts1" class="echarts1"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      dataObj: {
        xData: ['04-19', '04-20'],
        yData: [15, 26]
      }
    }
  },
  mounted() {
    this.echartsFun()
  },
  methods: {
    echartsFun() {
      const myChart = echarts.init(document.getElementById('echarts1'))
      const color = ['rgba(41, 181, 246, 1)', '#00CA69']
      const xAxisData = this.dataObj.xData
      const yAxisData = this.dataObj.yData
      const t = this
      const option = {
        color: color,
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '0',
          containLabel: true // 显示范围包含坐标刻度
        },
        tooltip: {
          trigger: 'axis',
          confine: true, // 悬停内容超出画布用这个
          backgroundColor: 'rgba(0,0,0,0.5)',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          },
          formatter(params) {
            const index = params[0].dataIndex
            return (
              t.dataObj.xData[index] +
              '<br/>' +
              '数量：' +
              t.dataObj.yData[index]
            )
          }
        },
        xAxis: [
          {
            type: 'category',
            showMaxLabel: true, // X轴显示开头和最后一个信息
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#00c7ff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#063374'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            minInterval: 1,
            min: function (value) {
              if (value.min > 10) {
                return value.min - 10
              }
            },
            max: function (value) {
              if (value.max === 0) {
                return value.max + 10
              }
            },
            type: 'value',
            name: '单位（万/亿KWh）',
            axisLabel: {
              textStyle: {
                color: '#00c7ff'
              }
            },
            nameTextStyle: {
              color: '#063374',
              fontSize: 12,
              lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                color: '#1775A1'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: '',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(43,182,247,0.9)'
                },
                {
                  offset: 1,
                  color: 'rgba(158,255,255,0.9)'
                }
              ]),
              shadowColor: 'rgba(43, 182, 247, 0.2)',
              shadowBlur: 0,
              shadowOffsetY: 20
            },
            symbol: 'circle', // 数据交叉点样式
            markPoint: {
              label: {
                color: '#20c7fd',
                fontFamily: '',
                fontWeight: 800,
                position: 'top',
                formatter: '{c}'
              },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                  symbolSize: 0,
                  symbol: 'circle',
                  symbolOffset: [0, -4],
                  label: {
                    color: 'rgba(158,255,255,0.9)'
                  }
                },
                {
                  type: 'min',
                  name: '最小值',
                  symbolSize: 0,
                  symbol: 'circle',
                  symbolOffset: [0, -4],
                  label: {
                    color: 'rgba(43,182,247,0.9)'
                  }
                }
              ]
            },
            itemStyle: {
              normal: {
                color: '#C8E4FF'
              }
            },
            data: yAxisData
          }
        ]
      }
      myChart.setOption(option, true) // true无数据时更新试图
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts1 {
  width: 100%;
  height: 100%;
}
</style>

使用

<Echarts1></Echarts1>
import Echarts1 from './echarts1'
components: { Echarts1 },