vue echarts 组件使用

本文主要是介绍vue echarts 组件使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官网参考：https://echarts.apache.org/zh/option.html#title

1.安装echarts

// npm安装echarts

 npm install echarts --save


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

2.在需要的组件中使用（封装组件复用）

先创建一个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>

这篇关于vue echarts 组件使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！