首页 > 代码库 > echarts_部分图表配置_堆叠折线图
echarts_部分图表配置_堆叠折线图
echarts基本图表使用:
1.获取包裹元素(var myChart = echarts.init(document.getElementById(‘thisId’));)2.设置option(option={...})3.使用设置好的option显示图表(myChart.setOption(option);)
废话不多讲上图:
function ZX_bottom (thisId,titleName){ var myChart = echarts.init(document.getElementById(thisId)); option = { tooltip : { trigger: ‘axis‘, /*show:false,//添加鼠标浮动窗口就消失了*/ axisPointer: { type: ‘line‘,//指示器类型。 cross‘ 十字准星指示器 其他选项 line shadow label: { backgroundColor: ‘rgba(255, 255, 255, .5)‘//XY轴显示的小方块 }, crossStyle: {//线的颜色 axisPointer.type 为 ‘cross‘ 时有效。 color: ‘#fff‘ } } }, backgroundColor : ‘rgba(43, 62, 75, .5)‘,//背景颜色 toolbox: {//工具栏 show: false//是否显示工具栏组件 }, legend: { data:[‘营销流量‘,‘自然流量‘], textStyle : { color : ‘#FFF‘, fontSize: 15 } }, grid : { left : ‘2%‘, right : ‘7%‘, bottom : ‘3%‘, containLabel : true, }, xAxis : [ { type : ‘category‘, boundaryGap : false,//x轴两侧留白策略 axisLabel : { show : true, textStyle : { color : ‘#FFF‘, fontSize: 15 } }, splitLine : {//去掉网格线 show : false }, axisLine : { lineStyle : { color : ‘#FFF‘, fontSize: 15 } }, axisTick : { lineStyle : { color : ‘#FFF‘, fontSize: 15 } }, data : [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周日‘], } ], yAxis : [ { type : ‘value‘, axisLabel : { show : true, textStyle : { color : ‘#FFF‘, fontSize: 15 } }, splitLine : {//去掉网格线 show : false }, axisLine : { lineStyle : { color : ‘#FFF‘, fontSize: 15 } }, axisTick : { lineStyle : { color : ‘#FFF‘, fontSize: 15 } } } ], series : [ { name:‘自然流量‘, type:‘line‘, stack: ‘总量‘, areaStyle: {normal: {}}, color:[‘#ff907f‘],//对应上面data的背景色 data:[220, 182, 191, 234, 290, 330, 310] },{ name:‘营销流量‘, type:‘line‘, stack: ‘总量‘, areaStyle: {normal: {}}, color:[‘#52d2dd‘],//对应上面data的背景色 data:[120, 132, 101, 134, 90, 230, 210] } ] }; myChart.setOption(option); }
echarts_部分图表配置_堆叠折线图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。