踩坑
1.初始化时不显示图表
原因：对需要init的元素要设置该div的高度和宽度
// html
// js
this.budgetExpenseChart = echarts.init(this.$refs.budgetExpense);
this.budgetExpenseChart.setOption({},true)
2.饼状图初始化时默认label，鼠标划入时隐藏默认标签
initTotalBudgerLabel(){
// 页面加载默认显示的标签
this.totalBudget.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: 0});
// 鼠标划入时隐藏默认标签
this.totalBudget.on('mouseover', (v) => {
if (v.dataIndex !== 0) {
this.totalBudget.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
});
}
});
3.echarts重绘操作
// 重绘
window.addEventListener("resize", () => { this.budgetExpenseChart.resize();});
各组件用法
1.tooltiip(提示框组件)
tirgger（触发类型）
'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
formatter:自定义提示框内容
2.legend(图例组件)
3.grid（网格组件）
4.xAxis:x轴
4.1.position：x坐标轴的位置，'top'或者'bottom'
4.2.type：坐标轴的类型
4.3.name:坐标轴的名称
4.4.nameLocation:坐标轴名称的位置
4.5.inverse:是否是反向坐标轴
该属性默认为false，应用：当展示的柱状图是水平方向的，这时数据的展示方向应该是从上往下的，但是默认从下往上，设置该属性即可
4.6.interval：强制设置坐标轴的分割间隔
应用场景：当横轴的标签文字太多时，会使标签和标签挤压在一起，为了防止这种状况的发生，可是通过此属性设置几个间隔显示标签
4.7.axisLine（坐标轴线）
4.8.axisTick（坐标轴刻度相关）
4.9.axisLabel（坐标轴标签）
interval（坐标轴刻度标签的显示间隔）
rotate
刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
formatter：刻度标签的内容格式器
margin：刻度标签与轴线之间的距离
align：文字的水平对其方式
verticalAlign：文字的垂直对其方式
rich：可以自定义丰富样式
// 样例
formatter: function (params) {
var percent = '';
var text = params.name;
percent = params.percent + '%';
return '{percent|' + percent + '}\n{text|' + text + '}'
},
rich: {
percent: {
color: '#43DBA3FF',
fontSize: '26',
textAlign: 'center'
},
text: {
color: '#6D7278FF',
fontSize: '14',
textAlign: 'center',
padding: [0, 15, 0, 15]
}
}
}
splitLine：坐标轴在grid区域中的分割线
data：在类目轴中（type:category）有效
5.yAxis(y轴)
6.dataset
该组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用
// 声明1
[
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
// 声明2
[
{product: 'Matcha Latte', count: 823, score: 95.8},
{product: 'Milk Tea', count: 235, score: 81.4},
{product: 'Cheese Cocoa', count: 1042, score: 91.2},
{product: 'Walnut Brownie', count: 988, score: 76.9}
]