vue-echarts图表的应用(总结)

vue项目中echarts图表的应用(总结)

一 . 安装echarts包

npm i echarts 

二 . 放置两个图表的div，并给定高宽

<div class="chart">
  <!-- 图表 -->
  <div ref="social" style=" width: 100%; height:100% " />
</div>

  
<div class="chart">
  <!-- 图表 -->
  <div ref="provident" style=" width: 100%; height:100% " />
</div>

三 . 在mounted中初始化图表

watch直接写入图表

<script>
import CountTo from 'vue-count-to'
import { mapGetters } from 'vuex'
import { getHomeData, getMessageList } from '@/api/home'
import * as echarts from 'echarts' // 引入所有的echarts
export default {
  components: {
    CountTo
  },
  data() {
    return {
      homeData: {
        'socialInsurance': {},
        'providentFund': {}
      }, // 存放首页数据的对象
      list: []
    }
  },
  // 计算属性
  computed: {
    ...mapGetters(['name', 'avatar', 'company', 'departmentName']) // 映射给了计算属性
  },
  watch: {
    homeData() {
      console.log(this.homeData)
      // 设置图表
      this.social.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.homeData.socialInsurance?.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.homeData.socialInsurance?.yAxis,
            type: 'line',
            areaStyle: {
              color: '#04c9be' // 填充颜色
            },
            lineStyle: {
              color: '#04c9be' // 线的颜色
            }
          }
        ]
      })
      this.provident.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.homeData.providentFund?.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.homeData.providentFund?.yAxis,
            type: 'line',
            areaStyle: {
              color: '#04c9be' // 填充颜色
            },
            lineStyle: {
              color: '#04c9be' // 线的颜色
            }
          }
        ]
      })
    }
  },
  created() {
    this.getHomeData()
    this.getMessageList()
  },
  mounted() {
    // 获取展示的数据 设置给图表
    // 监听homeData的变化
    this.social = echarts.init(this.$refs.social) // 初始化echart
    // data中没有声明 不是响应式
    this.provident = echarts.init(this.$refs.provident)
  },
  methods: {
    async getHomeData() {
      this.homeData = await getHomeData()
    },
    async getMessageList() {
      this.list = await getMessageList()
    }
  }
}
</script>

第二种方法

watch: {
    homeData(newVal, oldVal) {
      // console.log('homeData', newVal, oldVal)
      this.drawSocial()
      this.drawProvident()
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name', 'departmentName', 'company'])
  },
  created() {
    this.loadHomeData()
    this.loadMessageList()
  },
  mounted() {
    this.$fn()
    // myChart没有写在data中，它不是响应式的，就是一个普通的，对象的属性
    this.myChartSocial = echarts.init(this.$refs.social)
    this.myChartProvident = echarts.init(this.$refs.provident)

    // echarts.init(this.$refs.provident)
  },
  methods: {
    drawProvident() {
      // 1. 准备option

      const option = {
        title: {
          text: this.homeData.providentFund.category
        },
        tooltip: {},
        legend: {
          data: ['公积金申报数据']
        },
        xAxis: {
          data: this.homeData.providentFund.xAxis
        },
        yAxis: {},
        series: [
          {
            name: '金额',
            type: 'line',
            data: this.homeData.providentFund.yAxis
          }
        ]
      }
      // 2. setOption画图
      this.myChartProvident.setOption(option)
    },
    drawSocial() {
      // 1. 准备option

      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: this.homeData.socialInsurance.xAxis
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.homeData.socialInsurance.yAxis
          }
        ]
      }
      // 2. setOption画图
      this.myChartSocial.setOption(option)
    },
    async loadMessageList() {
      const res = await getMessageList()
      console.log(res)
      this.messageList = res.data
    },
    async loadHomeData() {
      const res = await getHomeData()
      // console.log('res', res)
      this.homeData = res.data

      // 数据回来了，开始画图
    }
  }

echarts图表的按需导入(可替换上边的全部导入)

// 按需导入 echarts
import * as echarts from 'echarts/core' // 引入核心包
import { CanvasRenderer } from 'echarts/renderers'

import { LineChart } from 'echarts/charts' // 引入折线图
import { BarChart } from 'echarts/charts'

import { TitleComponent } from 'echarts/components'
import { TooltipComponent } from 'echarts/components'
import { LegendComponent } from 'echarts/components'
import { GridComponent } from 'echarts/components'

echarts.use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart
])

LegendComponent } from ‘echarts/components’
import { GridComponent } from ‘echarts/components’

echarts.use([
CanvasRenderer,
LineChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
BarChart
])