vue项目中使用echarts

vue项目中使用echarts

一、使用场景

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

---

二、使用步骤

1. 安装 echarts

   npm install echarts --save
   

2. 在 main.js 中引入

   import echarts from "echarts";
   

3. 挂在到 Vue 实例上

   Vue.prototype.$echarts = echarts;
   

4. DOM结构

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

5. 初始化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);
       }
   

6. 温馨提示

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

    this.loadingChart();
   

---

三、温馨提示

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

• 扫码