vue项目中使用echarts

vue项目中使用echarts

一、使用场景

在项目开发中，我们往往会遇到数据统计方面的需求，这时候为了直观的呈现数据，我们需要制作图表。此时，我们可以使用 echarts 来制作。

---

二、使用步骤

安装 echarts

npm install echarts --save

在 main.js 中引入

import echarts from "echarts";

挂在到 Vue 实例上

Vue.prototype.$echarts = echarts;

DOM结构

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

初始化echarts使用

loadingChart() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("chart")); // 指定图表的配置项和数据 let option = { title: { text: "ECharts 入门示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }

温馨提示

因为初始化echarts 的时候，需要指定的容器，如：id="chart"的标签，所以对应的方法需要在DOM 结构加载完成后执行，即是在mounted中执行方法；

this.loadingChart();

---

三、温馨提示

更多博文，请关注公众号：xssy5431 小拾岁月

扫码