vue中使用echarts

Posted 2021-07-08 fengshaopu

一、下载echarts

我们要使用echarts先要去下载echarts

官方文档：[echarts](Documentation - Apache ECharts)

 下载echarts的命令是；最好把合并的插件也下载上 lodash 下载4.17.15版本的

>npm install echarts --save   下载最新的版本

>npm install lodash@4.17.15 --save 合并的版本

二、使用echarts

我们可以在局部使用echarts；

在组件中导入echarts，跟合并的插件：

import * as echarts from "echarts";
import _ from "lodash";

 三、我们请求完接口后可以直接用_合并

例子：

  var myChart = echarts.init(document.getElementById("main")); 

    this.$axios("reports/type/1", this.myChart).then(res => {  //请求接口
      console.log(res);
      if (res.meta.status == 200) { 
        this.list = res.data.legend.data;
        var result = _.merge(res.data, this.options);       //直接用_合并即可
        console.log(result);
        myChart.setOption(this.option);            //然后添加到数据源里
      }
    });

 

四、使用echarts完整的代码

<template>
  <div>
    <sss />
    <div id="main" style="width: 900px;height:400px;"></div>
     <el-button type="info" @click="$router.push('zhu')">去柱形图</el-button>
     <el-button type='info' @click="$router.push('bing')">饼状图</el-button>
  </div>
</template>

<script>
import * as echarts from "echarts";
import sss from "./s/s";
import _ from "lodash";
export default {
  components: {
    sss
  },
  name: "",
  data() {
    return {
      list: [],
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));

    // 使用刚指定的配置项和数据显示图表。
    this.$axios("reports/type/1", this.myChart).then(res => {
      console.log(res);
      if (res.meta.status == 200) {
        this.list = res.data.legend.data;
        var result = _.merge(res.data, this.options);
        console.log(result);
        myChart.setOption(result);
      }
    });
  },
  methods: {},
  computed: {},
  watch: {}
};
</script>

<style scoped>
</style>