1. 每种可视化都有其适合的应用场合，需要在明确要展示的信息之后合理选择可视化类型，总结下:
- 如果需要展示数据的分布情况，可以考虑散点图、箱线图、柱状图、直方图;
- 如果需要展示数据的变化趋势，可以考虑折线图和双轴图;
- 如果需要展示对比效果，可以考虑柱状图、饼图、雷达图;
- 如果需要展示数据的部分与整体关系，可以考虑面积图、饼图、旭日图、堆叠柱状图、矩形树图;
- 如果需要展示数据之间的关系，可以考虑散点图、气泡图、桑基图。
- 如果需要展示文本信息的重点，可以考虑词云图;
- 如果需要展示流程中每一步的转化情况，可以考虑漏斗图。
2. Echarts重新渲染canvas高度为0
遇到的问题是：当接口有返回值，Echarts的canvas高度为0，从而图表的数据展示不出来；
解决方法：
Echarts官网文档，resize这个方法里面有opts，可以设置高度，楼主就是创建Echarts实例（init）后，重新resize并且设置高度，从而解决了这个问题。
3. Echarts y轴均分问题
4均分的情况
max的值为 2,4,8,16 20,40,80,160 ........
时，y轴会4均分
5均分的情况
max的值为 1,5,15,25 10,50,150,250........
时，y轴会5均分
6均分的情况
max的值为 3,6,12,18 30,60,120,180........
时，y轴会6均分
4. echarts柱状图动态改变柱子颜色，多次切换可能出现颜色错乱的问题
解决方案一：
myChart.setOption(option, true)
解决方案二：
每次画图之前先调用 $("#你的画布名称").removeAttr("echarts_instance").empty()属性来清除上次的属性
5. echarts柱状图点击单个柱子颜色变化，其它柱子颜色不变
let dataIndex = -1
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
color: function (params){
if (params.dataIndex == dataIndex) {
return 'red'
} else {
return params.color
}
}
}
}
]
};
myChart.on('click', (parmas) => {
dataIndex = parmas.dataIndex
myChart.setOption(option)
})
6. echarts点击图表外部事件 myChart.getZr()
myChart.getZr().on('click', function (params) {
// 图表外部事件
if(!params.target) {
}
})
7. echarts雷达图点击端点获取标签文字
myChart.on('click', function (v) {
// 获取端点对应的标签文字
option.radar.indicator[v.event.topTarget.__dimIdx]
// 禁用边的点击事件
if (!v.event.topTarget.__dimIdx && v.event.topTarget.__dimIdx !== 0) {
return
}
})
