如何在vue中使用echart图表_vue echart

人狠话不多，先上效果图！

以上都是在项目中经常使用到的图标，地图的引入在4.x版本，下载的安装包有地图的json文件，要另外引入，但是在5.x版本，安装包里去掉了地图json文件，我们需要去网站下载好之后放到项目中，在引入使用，后面我也会在写一篇关于地图的使用！

echarts中文官网

官网链接点击查看：ECharts


其实官网中有在项目中使用的详细步骤，大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。

echarts在vue项目中实现的步骤

webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。

第一步：先安装echarts

// npm安装echarts
 npm install echarts --save
1
2

或者

// 先安装淘宝镜像
 npm install -g cnpm --registry=https://registry.npm.taobao.org
// cnpm安装echarts
 cnpm install echarts -S
1
2
3
4

第二步：在需要的组件中使用echart

个人喜欢把echart.vue单独封装起来，方便使用和复用。先创建一个chartLint.vue文件;

chartLint.vue文件：

<template>  
      <div id="echart-line" :style="{width: '100%', height: '100%'}"></div>   
</template>

<script>

import echarts from  "echarts";

export default {
     
   methods:{

      initChart(name,xData,yData) {
       
          let getchart = echarts.init(document.getElementById('echart-line'));
          var  option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [name],
                    bottom:'0%'
                },
                grid: { //调整图表上下左右位置
                    top:'10%',
                    left: '3%',
                    right: '8%',
                    bottom: '11%',
                    containLabel: true
                },
               
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: name,
                        type: 'line',
                        stack: '总量',
                        data: yData
                    },
                ]
            };

          getchart.setOption(option);
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            getchart.resize();
        });
      },

    }

}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

在需要的组件中引入即可：

 <template>
   <div class="analysisTask">             
       <ChartLine ref="chart_line_one"/>              
   </div>
</template>

<script>
import ChartLine from './partChart/chartLine.vue'

export default{
    data(){
        return{
          name:'张雪',
          xData: ['2020-02', '2020-03', '2020-04', '2020-05'],
          yData: [30, 132, 80, 134],
        }
    },
    mounted () {
       const {name,xData,yData} = this
       console.log(this.$refs)
       this.$refs.chart_line_one.initChart(name,xData,yData)
    },
    components: {
       ChartLine,
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这样就显示出来啦！