Vue引入echarts方法與使用介紹

更新時(shí)間：2022年08月22日 09:51:21 作者：抗?fàn)幍男∏嗄?

Echarts，它是一個(gè)與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 引入echarts

npm install echarts --save

在vue項(xiàng)目中安裝

2. 將echarts設(shè)置為全局

main.js（項(xiàng)目入口文件）

//引入echarts文件
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

這樣我們就可以使用this.$echarts來使用echarts了

3. 在相關(guān)組件中使用

要注意的是在表格顯示的區(qū)域一定要定義寬度和高度，這樣才可以正常顯示。

組件使用element-ui的card

<div class="datamap">
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>訂單統(tǒng)計(jì)</span>
                </div>
                <div id="one"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>商品種類</span>
                </div>
                <div id="two"></div>
            </el-card>
        </el-col>
    </el-row>
</div>

設(shè)置表格盒子的寬度和高度(one、two)

.datamap #one {
  height: 500px;
}
.datamap #two {
  height: 500px;
}

配置鉤子函數(shù)mounted時(shí)，調(diào)用圖標(biāo)生成函數(shù)

export default {
  name: "dataview",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      setTimeout(() => {
        this.initCharOne();
        this.initCharTwo();
      }, 1000);
    },
	//兩個(gè)圖標(biāo)的生成函數(shù)
    initCharOne() {},
    initCharTwo() {},
  },
};

為了防止異步導(dǎo)致數(shù)據(jù)無法正常顯示，我這里使用setTimeout方法，讓表格延遲顯示，確保表格數(shù)據(jù)顯示不受任務(wù)隊(duì)列的影響。

配置函數(shù)initCharOne()

這里就涉及到echarts的用法了，具體方法不在這里細(xì)說，若有需要跳轉(zhuǎn)echarts官方文檔

initCharTwo() {
      const option = {
        dataset: [
          {
            dimensions: ["name", "age", "profession", "score", "date"],
            source: [
              ["Hannah Krause", 41, "Engineer", 314, "2011-02-12"],
              ["Zhao Qian", 20, "Teacher", 351, "2011-03-01"],
              ["Jasmin Krause ", 52, "Musician", 287, "2011-02-14"],
              ["Li Lei", 37, "Teacher", 219, "2011-02-18"],
              ["Karle Neumann", 25, "Engineer", 253, "2011-04-02"],
              ["Adrian Gro?", 19, "Teacher", "-", "2011-01-16"],
              ["Mia Neumann", 71, "Engineer", 165, "2011-03-19"],
              ["B?hm Fuchs", 36, "Musician", 318, "2011-02-24"],
              ["Han Meimei", 67, "Engineer", 366, "2011-03-12"],
            ],
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
        },
      };
      var myChartTwo = this.$echarts.init(document.getElementById("two")); //圖標(biāo)初始化\
      myChartTwo.setOption(option);
      window.onresize = function () {
        myChartTwo.resize();
      };
    },

如果你按照以上幾步走下來，那你肯定可以成功展示。