Echarts在vue项目中的使用方法,数据添加到setOption里面的两种方式
<template>
<div>
<div style="width:500px;height:500px" ref="chart"></div>
</div>
</template>
<script>
export default{
data () {
return {};
},
mounted () {
this.initCharts();
},
methods: {
initCharts () {
//得到所有图表的包
var echarts = require('echarts');
//包中调用init方法绑定元素
let myChart = echarts.init(this.$refs.chart);
console.log(this.$refs.chart)
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
},
}
另一种写法:var option = {
legend: {},
tooltip: {},
dataset: {
source: [
['class', '软件工程1701B', '软件工程1702B', '软件工程1703B', '软件工程1801B'],
['迟到', 3, 5,1, 5],
['出勤', 31, 29, 29,32],
['未出勤',1,8,6, 4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// These series are in the first grid.
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// These series are in the second grid.
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
};
myChartall.setOption(option);
</script>
比较基础,害怕自己好久不用忘掉啊!