** 插件：ECharts ^3.0 **
- npm 安装 ECharts
你可以使用如下命令通过npm 安装 ECharts
** npm install echarts --save **
- 创建图表
在HTML页面中创建图表的容器，** 图表必须指定宽高 ，不能用百分比**
<div class="chart" ref="charts"></div>
<style lang="css">
.chart {width: 300px; height: 300px;}
</style>
- 引入 ECharts
import echarts from 'echarts'
export default {
data () {
return {
Charts: '',
xData: '',
yData: ''
}
},
methods: {
drawChart () {
// echarts实例化
this.Charts = echarts.init(this.$refs.charts)
// 初始化实例
var option = {
// 图表所需配置项(可参考http://echarts.baidu.com/option.html#title)
tooltip: {...},
grid: {...},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
name: '(Kcal)',
type: 'value'
}
],
series: [
{
name: '总能量',
type: 'bar',
barWidth: '60%',
data: []
}
]
}
this.Charts.setOption(option)
},
// 渲染数据，在**接口调用完调用该函数**
loadChart () {
this.chart.setOption({
xAxis: [{
data: this.xData // xData 从接口获取的横轴数据
}],
series: [{
// 根据名字对应到相应的系列
data: this.yData // yData 从接口获取的纵轴数据
}]
})
}
},
mounted () {
this.drawChart()
}
}
