echarts 折线图

最新推荐文章于 2024-11-05 15:31:54 发布

学不会•

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量195

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41588991/article/details/139330859

版权

封装折线图组件组件名diagran.vue

<!--柱形图、折线-->
<template>
  <div class="chartBarLine" ref="chartBarLine"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['option'],
  data () {
    return {
      chartDom: null,
      chartData: this.option
    }
  },
  watch: {
    option: {
      handler (val) {
        this.chartData = val
        this.$nextTick(() => {
          this.chartInit()
        })
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.chartInit()
    })
  },
  methods: {
    chartInit () {
      this.chartDom = echarts.init(this.$refs.chartBarLine)
      // 名称数组
      const names = this.chartData.map(m => { return m.name })

      // 随访数数组
      const data = this.chartData.map(m => { return m.num })

      // 死亡数数组
      const data2 = this.chartData.map(m => { return m.numDeath })

      this.chartDom.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          bottom: 15
        },
        grid: {
          top: '10%',
          left: '0%',
          right: '7%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#666666'
            },
            interval: 0
          },
          data: names
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#666666'
            }
          }
        },
        series: [
          {
            name: '学不会1',
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#1465DC'
                  },
                  {
                    offset: 1,
                    color: '#1465DC'
                  }
                ]),
                barBorderRadius: 6
              }
            },
            data: data
          },
          {
            name: '学不会2',
            type: 'line',
            lineWidth: 12,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#67D652'
                  },
                  {
                    offset: 1,
                    color: '#67D652'
                  }
                ]),
                barBorderRadius: 6
              }
            },
            data: data2
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.chartDom.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chartBarLine {
  width: 100%;
  height: 100%;
}
</style>

页面引用组件

<template>
  <div>
    <div class="left-charts">
      <Diagran :option='option' />
    </div>
  </div>
</template>

<script>
import Diagran from './diagran.vue'
export default {
  data () {
    return {
      option: [
        {
          "numDeath": 5065,
          "num": 0,
          "name": "测试1"
        },
        {
          "numDeath": 4503,
          "num": 0,
          "name": "测试2"
        },
        {
          "numDeath": 637,
          "num": 0,
          "name": "测试3"
        },
        {
          "numDeath": 460,
          "num": 0,
          "name": "测试4"
        },
        {
          "numDeath": 840,
          "num": 0,
          "name": "测试5"
        },
        {
          "numDeath": 1968,
          "num": 0,
          "name": "测试6"
        },
        {
          "numDeath": 1431,
          "num": 0,
          "name": "测试7"
        }
      ]
    }
  },
  components: {
    Diagran
  }
}
</script>

<style lang="less" scoped>
.left-charts {
  width: 600px;
  height: 500px;
  margin-left: 100px;
}
</style>