快捷導(dǎo)航

在vue中使用echart圖表全過程

更新時(shí)間：2026年04月23日 09:11:34 作者：前端探險(xiǎn)家

文章主要介紹了在Vue項(xiàng)目中使用ECharts的步驟,包括安裝ECharts、在webpack中引入和打包ECharts,并提供了具體的文件操作和引入方法,此外,還提到了ECharts官網(wǎng)的詳細(xì)使用步驟

先上效果圖

以上都是在項(xiàng)目中經(jīng)常使用到的圖標(biāo)，地圖的引入在4.x版本，下載的安裝包有地圖的json文件，要另外引入，但是在5.x版本，安裝包里去掉了地圖json文件，我們需要去網(wǎng)站下載好之后放到項(xiàng)目中，在引入使用，后面我也會在寫一篇關(guān)于地圖的使用！

echarts中文官網(wǎng)

官網(wǎng)鏈接點(diǎn)擊查看：ECharts

其實(shí)官網(wǎng)中有在項(xiàng)目中使用的詳細(xì)步驟，大家也可以通過對官網(wǎng)的學(xué)習(xí)來使用echarts,畢竟人家比比我介紹的更詳細(xì)更專業(yè)。

echarts在vue項(xiàng)目中實(shí)現(xiàn)的步驟

webpack 是目前比較流行的模塊打包工具，你可以在使用 webpack 的項(xiàng)目中輕松的引入和打包 ECharts，這里假設(shè)你已經(jīng)對 webpack 具有一定的了解并且在自己的項(xiàng)目中使用。

第一步：先安裝echarts

// npm安裝echarts
 npm install echarts --save

或者

// 先安裝淘寶鏡像
 npm install -g cnpm --registry=https://registry.npm.taobao.org
// cnpm安裝echarts
 cnpm install echarts -S

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

個(gè)人喜歡把echart.vue單獨(dú)封裝起來，方便使用和復(fù)用。先創(chuàng)建一個(gè)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: { //調(diào)整圖表上下左右位置
                    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);
          //隨著屏幕大小調(diào)節(jié)圖表
          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>

這樣就顯示出來啦！