应项目需求需要数据动态可视化,借此来烂笔头记下echarts3.6.2的使用方法.
一. 先做准备工作
1 .首先去官网下载所需要的echarts.js的相关代码,由于是开发环境,所以下载的是完整的echarts.js
2. 将echarts.js 直接引入项目中即可
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
3. 为图表准备一个DOM容器,(必须有固定的高度,宽度自定)
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
二. 开始书写 js 代码 显示视图
1.首先以通过 echarts.init 方法初始化一个 echarts 实例
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
2.通过 setOption 方法生成一个简单柱状图
//动态图前期加载 var xdate=[]; var ydata=[]; function addData(shift) { // 异步加载数据 $.post("systemInfo/getValue.do", function(data) { // 填入数据 xdate.push(data.systemInfo.timestamp); ydata.push(data.systemInfo.Total_Total); }); if (shift) { xdate.shift(); ydata.shift(); } } for (var i = 1; i < 7; i++) { addData(); } // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {//提示框组件
trigger: 'axis', }, legend: {//图例显示组件,data与series的name对应 data:['销量'], axisLabel:{ interval:0 } }, xAxis : [ { boundaryGap : false,//X轴距离y轴无缝隙 // min:0, // max:60, data: [], splitLine:{ show:false }, axisLabel:{ interval:0 } }, ], yAxis: {}, series: [{ name: '销量', type: 'line',//数据显示类型(柱状图bar/折线line) data: [] }] }); setInterval(function () { addData(true); myChart.setOption({ xAxis: { data: xdate }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: ydata }] }); }, 10*1000);