Echarts图表的应用

Posted 2021-06-10 ```飞翔的翅膀```

如何使用Echarts

第一步：下载安装

npm install echarts --save

第二步：在组件中引入

import * as Echarts from 'echarts'

第三步：创建一个div容器并创建化图表对象

  <div id="main" style="width: 600px;height:400px;"></div>

第四步：指定配置项

  const option=await getEchartsAPI()
 //合并图表初始数据和从接口返回的数据
   let optionData={...this.initData,...option}

第五步：将配置项指定给某个图表对象

myChart.setOption(optionData)

完整代码如下：

//图表api接口JS
export function getEchartsAPI() {
  return request({
    url: 'reports/type/1',
    method:'GET'
  })
}

//vue组件代码
<template>
  <div>
    <bread-crumb level1="数据统计" level2="数据报表"></bread-crumb>
    <!-- 卡片视图 -->
    <el-card>
      <div ref="box" style="width: 900px; height: 400px"></div>
    </el-card>
  </div>
</template>

//script代码
<script>
// 引入echarts
import * as Echarts from "echarts";
//调数据报表接口
import {getEchartsAPI} from '@/http/api'
export default {
  name: "report",
  data() {
    return {
      //图表的初始数据
      initData: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          backgroundColor: "rgba(0,0,0,0.3)",
          borderColor: "rgba(0,0,0,0)",
          textStyle:{
            color:"#fff"
          },
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    };
  },
  created() {
    // this.$nextTick(()=>{
    //   this.getEcharts()
    // })
  },

  //DOM加载后再触发
  mounted() {
    this.getEcharts();
  },
  methods: {
   async getEcharts() {
      //创建化Echrts对象
      let myChart = Echarts.init(this.$refs.box);
      //调用图表配置接口并返回图表配置数据
      const option=await getEchartsAPI()
      //合并图表初始数据和从接口返回的数据，如何合并多个对象？？
      let optionData={...this.initData,...option}

      //指定配置给myChart图表对象
      myChart.setOption(optionData)
    },
  },
};
</script>