Echarts柱状图和折线图动态轮播展示

想通过Echarts实现动态轮播功能，代码如下
原创不易，转载请附上原创谢谢，
以下代码复制可用

var dateCity = ["北京","上海","广东","浙江","江苏","山东","河南","福建","安徽","湖北","湖南","辽宁","吉林","陕西","四川","山西"];
var dateCityTop= ["北京","上海","广东","浙江","江苏","山东","河南","福建"];
var dataSeri0=[95000,85000,80000,75000,70000,65000,60000,55000,54000,50000,48000,46000,42000,40000,38000,36000];var dataSeri0Top=[95000,85000,80000,75000,70000,65000,60000,55000];   var dataSeri1=[122.95,91.61,118.48,113.46,111.85,132.95,117.39,76.65,90.22,84,93.05,104.04,82.4,74.42,75.39,80.95];
var dataSeri1Top=[122.95,91.61,118.48,113.46,111.85,132.95,117.39,76.65];    option = {title: {text: '保险分公司保费规模及达成率动态轮播',subtext: '纯属虚构'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#283b56'}}},legend: {data:['保费', '达成率']},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},xAxis: [{type: 'category',boundaryGap: true,data:  dateCityTop,}],yAxis: [{type: "value",name: "万元",splitLine: {show: false},axisTick: {show: true},},{type: "value",name: "达成率",axisLabel: {show: true,formatter: "{value} %", //右侧Y轴文字显示},splitLine: {show: false},axisTick: {show: true},}],series: [{name:'保费',type:'bar',data:dataSeri0Top,yAxisIndex: 0, },{name:'达成率',type:'line',data: dataSeri1Top,yAxisIndex: 1,}]
};app.count = 11;
//下标
var index = 8;//top多少就从多少开始
setInterval(function (){axisData = dateCity[index];var data0 = option.series[0].data;data0.shift();data0.push(dataSeri0[index]);var data1 = option.series[1].data;data1.shift();data1.push(dataSeri1[index]);option.xAxis[0].data.shift();option.xAxis[0].data.push(axisData);myChart.setOption(option);index+=1;if (index>=dateCity.length) {index = 0;}
}, 2000);

效果如图，会动态播放后面的信息

Echarts柱状图和折线图动态轮播展示相关推荐

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
关于echarts柱状图和折线图的样式修改
①去除折线图或饼图的虚线其实这里通过颜色就可以定位到设置. tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {co ...
echarts柱状图饼图折线图
最近大屏项目里做的首先看看效果这几个图我将其标为七个部分下方成为echarts1,echarts2往后类推有需要可以直接拷贝下方代码推荐一个朋友最近发我的echarts图形地址 ...
echarts柱状图、折线图渐变色，填充渐变色，鼠标移入样式，双y轴
基础代码都一样,根据配置的seriesDta的type不同,展现出的效果不同,每一个echarts都对应单独的series 版本不同可能实现效果不同,具体查看官网哦. 安装: npm install ...
Echarts 柱状图、折线图和仪表盘的一写属性设置
目录一. 柱状图 1.背景线设置为虚线,lineStyleL里面的type属性为dashed,默认是实线. 2.鼠标放在柱子上的阴影效果,如果用shadow无法设置宽度 3.鼠标放上的tip自定义 ...
vue项目中，Echarts柱状图和折线图混合显示
<div ref="myChart" :style="{width: '800px', height: '500px'}"></div> ...
echarts柱状图加折线图
option = { color: ["#0080FF", "#0FDBA2"], title: {textStyle: {color: '#fff',font ...
echart 折线从左到右动画效果_echarts多条折线图动态分层的实现方法
1.关于Echarts 大家可以到这个网址看一下,还是比较详细的. 这个功能还是很强大的,对于喜欢做数据统计来说是美味的. 2.echarts多条折线图动态分层 var xData = param.x ...

Echarts柱状图和折线图动态轮播展示

Echarts柱状图和折线图动态轮播展示相关推荐

最新文章

热门文章