如何在vue中使用echart图表

川长思鸟来 2023-03-13 05:14 46阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 4]  
以上都是在项目中经常使用到的图标，地图的引入下一期会特别介绍！

### echarts中文官网 ###

官网链接点击查看：[ECharts][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 6]  
其实官网中有在项目中使用的详细步骤，大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。

### echarts在vue项目中实现的步骤 ###

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

#### 第一步：先安装echarts ####

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

或者

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

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

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

chartLint.vue文件：

<template>  
          <div class="echart" id="echart-line" :style="{float:'left',width: '100%', height: '230px'}"></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>

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

<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>

这样就显示出来啦！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/f0d3c5dbbe7b449b9a1fab237230fa8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/1b79bb17a35848caa43639841bdeea2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/886b28c5a1e24d598c239682d457e30e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230312/fdff2413fbbc411886f46c910f1c8004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230312/18a6846078834705b29a9accc4cc5633.png
[ECharts]: https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230312/de5869f263f64074b89a592d61356256.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20230312/819a4cdc98f64bdfb8e57af56435f9f9.png
[webpack]: https://www.webpackjs.com/