jiaminghi 的 Charts 组件还是算比较强大，拆线、柱状、饼图、雷达、仪表盘都有。遗憾的是：鼠标移到这些图表上时，不会有动态效果，比如无法实现鼠标移到折线图上某个点时显示该点的具体数值。
示例效果
源代码
<div style="width:500px; height:300px;" id="container"></div>
<input type="button" id="changeToData1" value="切换到第 1 数据"</input>
<input type="button" id="changeToData2" value="切换到第 2 数据"</input>
<script src="http://lib.jiaminghi.com/charts/charts.min.js"></script>
<script>
const option1 = {
title: {
text: '周销售额趋势'
},
xAxis: {
name: '第一周',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
name: '销售额',
data: 'value'
},
series: [
{
data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
type: 'line'
}
]
}
const option2 = {
title: {
text: '周销售额趋势'
},
xAxis: {
name: '第二周',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
name: '销售额',
data: 'value'
},
series: [
{
data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
type: 'line'
}
]
}
const Charts = window.Charts.default;
const container = document.getElementById('container');
const myChart = new Charts(container);
myChart.setOption(option1);
document.getElementById("changeToData1").onclick = function () {
myChart.setOption(option1);
};
document.getElementById("changeToData2").onclick = function () {
myChart.setOption(option2);
};
</script>
