美文网首页
Echarts折线图

Echarts折线图

作者: 衬fzy | 来源:发表于2022-04-19 14:19 被阅读0次
    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 },
    

    相关文章

      网友评论

          本文标题:Echarts折线图

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