echart自定义动画_ECharts使用—折线图动态加载

本文介绍了如何使用ECharts实现折线图的动态加载和自定义动画。通过设置图表配置项,包括tooltip、toolbox、xAxis、yAxis等,展示了单线条和多线交错的折线图。同时,利用setOption方法动态更新数据,配合loading动画,提供了流畅的用户体验。文章还提及了series中stack属性的作用,以及如何进行异步数据加载。
摘要由CSDN通过智能技术生成

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

一、首先引入echarts.common.min.js文件,当然开发状态下使用echarts.js可以更便于调试,(http://www.echartsjs.com/download.html)

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

三、使用 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)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,关于echarts时间曲线图和折线图动态x轴及数据的问题,我可以为您提供一些参考。 1. 时间曲线图 时间曲线图可以使用 echarts 的 line 和 time-line 组件实现。其中,line 组件用于绘制折线图,time-line 组件用于控制时间轴。 具体实现步骤如下: 1)引入 echarts 库和主题 ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/theme/dark.js"></script> ``` 2)创建 echarts 实例 ```javascript var myChart = echarts.init(document.getElementById('main'), 'dark'); ``` 3)配置图表选项 ```javascript var option = { // 设置图表标题 title: { text: '时间曲线图', left: 'center' }, // 设置图表的工具箱 toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, // 设置时间轴 timeline: { axisType: 'category', data: ['2010', '2011', '2012', '2013', '2014', '2015', '2016'], autoPlay: true, playInterval: 1000, left: '10%', right: '10%', bottom: '3%', width: '80%', label: { color: '#999' }, controlStyle: { showPrevBtn: true, showNextBtn: true, normal: { color: '#999' }, emphasis: { color: '#666' } }, checkpointStyle: { symbol: 'circle', symbolSize: 8, color: '#666', borderWidth: 2, borderColor: '#666' }, itemStyle: { normal: { color: '#666' }, emphasis: { color: '#666' } } }, // 设置坐标轴 xAxis: { type: 'time', splitLine: { show: false }, axisLine: { lineStyle: { color: '#999' } } }, yAxis: { type: 'value', splitLine: { show: false }, axisLine: { lineStyle: { color: '#999' } } }, // 设置数据 series: [{ name: '数据1', type: 'line', data: [ ['2010-01-01', 100], ['2011-01-01', 200], ['2012-01-01', 300], ['2013-01-01', 400], ['2014-01-01', 500], ['2015-01-01', 600], ['2016-01-01', 700] ] }, { name: '数据2', type: 'line', data: [ ['2010-01-01', 200], ['2011-01-01', 300], ['2012-01-01', 400], ['2013-01-01', 500], ['2014-01-01', 600], ['2015-01-01', 700], ['2016-01-01', 800] ] }] }; ``` 4)将配置项设置到 echarts 实例中 ```javascript myChart.setOption(option); ``` 2. 折线图动态x轴及数据 折线图动态x轴及数据可以通过 echarts动态更新数据的方法实现。具体实现步骤如下: 1)定义一个空的数组变量 ```javascript var data = []; ``` 2)使用定时器动态更新数据 ```javascript setInterval(function () { // 获取当前时间 var now = new Date(); // 将当前时间转换为字符串 var time = [now.getHours(), now.getMinutes(), now.getSeconds()].join(':'); // 生成随机数 var value = Math.random() * 1000; // 将时间和数据添加到数组中 data.push({ name: time, value: value }); // 控制数据长度不超过50个 if (data.length > 50) { data.shift(); } // 更新图表数据 myChart.setOption({ series: [{ data: data }] }); }, 1000); ``` 以上就是关于 echarts 时间曲线图和折线图动态x轴及数据的简单介绍和实现方法,希望对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值