jiaminghi 的 Charts 组件使用

作者:vkvi 来源:千一网络(原创) 日期:2020-10-20

jiaminghi 的 Charts 组件还是算比较强大,拆线、柱状、饼图、雷达、仪表盘都有。遗憾的是:鼠标移到这些图表上时,不会有动态效果,比如无法实现鼠标移到折线图上某个点时显示该点的具体数值。

示例效果

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>


相关文章