在Vue上初级使用ECharts

本文主要是介绍在Vue上初级使用ECharts，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、安装ECharts

npm install echarts –save

2、在main.js上引用ECharts

import echarts from ‘echarts’

3、在.vue页面为 ECharts 准备一个具备大小（宽高）的 DOM

<div class="charts" ><div id="myChart" style="width:1000px;height:500px"></div>
</div>

4、在mounted时通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表

mounted(options){let echarts = require('echarts/lib/echarts')// 引入基本模板，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块(可以按需引入的模块列表见见本博客底部)// 例如：引入柱状图//require('echarts/lib/chart/bar');let chartBox=document.getElementsByClassName('charts')[0]let myChart=document.getElementById('myChart')function resizeCharts() {//为调整图标尺寸的方法myChart.style.width=chartBox.style.width+'px'myChart.style.height=chartBox.style.height+'px'}let mainChart = echarts.init(myChart)// 基于准备好的dom，初始化echarts实例var option = null;// 指定图表的配置项和数据option = {title: {text: 'ECharts图表'},tooltip: {},legend: {data:['平均成绩']},xAxis: {data: ["A班","B班","C班","D班","E班"]},yAxis: {},series: [{name: '平均成绩',type: 'bar',data: [95, 88, 80, 77, 75, 70]}]};// 使用刚指定的配置项和数据显示图表。if (option && typeof option === "object") {mainChart.setOption(option, true)}}

可以按需引入的模块列表见
https://github.com/ecomfe/echarts/blob/master/index.js

这篇关于在Vue上初级使用ECharts的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---