1.echarts使用
2.渐变
3.网格线隐藏、显示
https://blog.csdn.net/lhove/article/details/106623536
网格线介绍
https://blog.csdn.net/weixin_40562026/article/details/85071370
线的显示、隐藏
4.标题
5.legend图例的显示与隐藏
legend
6.饼图如何添加指示百分比
文字百分比
7.颜色
和data顺序一致
https://jingyan.baidu.com/article/7f766dafff9b374101e1d093.html
颜色
8.自适应resize
resizeChart() { this.echart ? this.echart.resize() : '' }
mounted() { //resize 改变图表尺寸,在容器大小发生改变时需要手动调用(因为侧边栏是可以收缩的,所以这里图表根据是否收缩来改变图表尺寸)
window.addEventListener('resize', this.resizeChart) },
//销毁 防止内存泄漏destroyed() { window.removeEventListener('resize', this.resizeChart) }
chartInit() {
this.chart = echarts.init(this.$refs["chart"]);
},
resize() {
this.chart.resize();
},
9.传单位
数据单位
10.echarts社区实例
11.echarts5.0
12.换行
Echarts 坐标轴换行 \n
13.echarts数据变化后,图表不更新
14.封装
15.echarts dom
let myChart = echarts.getInstanceByDom(document.getElementById(chartDom))
16.echarts 折线起点从最左端开始
17.dataset对象格式
https://echarts.apache.org/examples/zh/editor.html?c=dataset-simple1
18.echarts 显示顺序
https://blog.csdn.net/weixin_31190007/article/details/114167334
19.echarts图表导出图片
https://blog.csdn.net/workhard0905/article/details/123128888
20.暂无数据
if(!xAxis.length) {
option.title = {
text: '暂无数据',
left: 'center',
top: 'center',
fontSize: '35',
}
}
if (!xAxis.length) {
option.title = {
x: 'center',
y: 'center',
text: '{a| ' + '}',
textStyle: {
rich: {
a: {
backgroundColor: {
image: require('../../public/icon—noData.jpg')
},
height: '115',
width: '10'
}
}
}
}
} else {
option.title = {
text: ''
}
}