ECharts使用—折线图动态加载

最近需求中用到折线图，单线条，多线交错，之前是散点图，用的是另一个 amcharts.js，这个文档也能找的到，回归早本次重点：ECharts

一、首先引入echarts.common.min.js文件，当然开发状态下使用echarts.js可以更便于调试，传送门

二、为图表准备一个dom容器，宽高可以自行定义，

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

三、使用 echarts.init 方法初始化一个echart是实例，并通过setOption方法生成一个简单的折线图，如下：

// 1 单独一个
var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据
var option = {tooltip: { //跟随鼠标显示数值trigger: 'axis'},//保存图片toolbox: {feature: {saveAsImage: {name:'热度监控', //图片名pixelRatio:2}}},/* grid: {   //canvas距离边界位置left: '3%',bottom:'25%'},*/// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。xAxis: {type: 'category',boundaryGap: false,//坐标轴不留白data: dataX.slice(0,10),axisLabel: { //x坐标展示偏移interval:0,rotate:60},/* axisLabel: { //刻度偏移interval: 0,rotate:0,fontWeight:'400',formatter:function(value){return value.split("").join("\n");}},axisTick:{  //隔几个空格显示刻度interval:1,}*/},// 声明一个 Y 轴，数值轴。yAxis: {type: 'value'},// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。series: [{data: [820, 932, 901, 934, 932, 901, 934],type: 'line'}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

其中部分属性都附上了注释，实际中会常用的是 saveAsImage ，用于图片的保存，

三、对于多个折线，跟上面的方法大同小异，区别于声明图例组件legend和系列列表赋值，demo如下：

//2 多个折线 /*2*/
var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = {tooltip: {trigger: 'axis'},legend: {data:['总池','用户池','马甲池']},toolbox: {feature: {saveAsImage: {name:'奖池监控',pixelRatio:2}}},xAxis: {type: 'category',boundaryGap: false,data: dataX2,},yAxis: {type: 'value'},series: [{name:'总池',type:'line',stack: '总量',data:[120, 132, 101, 134, 90, 230, 210]},{name:'用户池',type:'line',stack: '总量',data:[220, 182, 191, 234, 290, 330, 310]},{name:'马甲池',type:'line',stack: '总量',data:[150, 232, 201, 154, 190, 330, 410]}]
};
myChart3.setOption(option3);

四、当然我们经常用的过程中值是需要动态配置的，用setOption给echarts实例动态赋值：

/*1先声明*/
var myChart1 = echarts.init(document.getElementById('main'));myChart1.setOption({legend: {data:['销量']},tooltip: {trigger: 'axis'}, toolbox: {feature: {saveAsImage: {name:'热度监控', pixelRatio:2}}},xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value'},series: [{name: '销量',type: 'line',data: []}]
});
// 2异步加载数据
$.get('/admin/js/data1.json').done(function (data) {    // 填入数据myChart1.setOption({xAxis: {type: 'category',boundaryGap: false,    data: data.dataX2},series: [{name: '销量',data: data.data1}]});});

具体参数就不在解释，可以参考API中配置的说明，自己尝试几下就知道对应的意思了，

五、动态加载的时候，请求需要时间，这个过程中可以显示loading动画，也是有提供的，

 myChart1.showLoading();

这个方法我在声明myChart1，初始化之后直接调用，动态配置获得请求后，在调用

 myChart1.hideLoading();

隐藏动画，举个栗子吧：

$.ajax({type: "get",url: 'demo.json',async: true,dataType: 'json',success: function(res) {if(res.status == 1 && res.data){var data = res.data;myChart3.setOption({xAxis: {type: 'category',boundaryGap: false,data: data.dataX1},series: [{name:'总池',type:'line',stack: '总量',data:data.dataY1}]});}else if(!data){messager('danger','暂无数据')}else{messager('danger',res.msg)}},error: function(error) {messager('danger',error.statusText)},complete:function () { myChart3.hideLoading();}});

叨逼叨：这里series里有参数项stack，多个线条时有用，如果设置相同的stack值，后一个系列的值会在前一个系列的值上相加。

当然，这只是冰山一角，只是自己刚好需要这点而已，更多强大的功能暂时没有用到~~~~ ^_^

转载于:https://www.cnblogs.com/simba-lkj/p/10232203.html

ECharts使用—折线图动态加载相关推荐

echart自定义动画_ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...
【Unity】光照贴图动态加载
一般情况下对场景进行烘焙后,其实不用关心光照贴图的加载问题,Unity会自动帮我们处理好的,比如这个测试场景,烘焙结束后,关掉烘焙灯光,运行,直接运行得到的效果就是预期这样,没有写任何代码,光照贴图就 ...
flutter 轮播图动态加载网络图片
Swiper,网上很多列子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包flukit: ^1.0.0引用 im ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
Echarts动态加载多条折线图
背景:动态加载多条折线图,折线图条数不确定页面效果: 页面代码 //气象数据function serchQx(beginTime, endTime, str, parameter) {$(" ...
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...
Echarts动态加载地图数据(Dynamic load Echarts map data)
本篇就是Echarts制作地图终篇啦,前面我们已经制作好自定义区域的地图,如何结合'数据'让地图根据我们的业务逻辑变得有"活力",这才是最重要的.Echarts官网中给的demo大 ...
echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava
[ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...

ECharts使用—折线图动态加载

ECharts使用—折线图动态加载相关推荐

最新文章

热门文章