echarts 3 的入门使用(动态折线图)

应项目需求需要数据动态可视化,借此来烂笔头记下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);

sweet__queen

发布了19 篇原创文章 · 获赞 11 · 访问量 2万+

私信关注

echarts 3 的入门使用(动态折线图)

猜你喜欢