Echarts图表的应用

Posted 2022-11-27 ```飞翔的翅膀```

如何使用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>