Echarts柱状图和线状图实例_echarts线形图资源-CSDN文库

共3个文件

js：2个

html：1个

echarts

echarts实例

需积分: 49 192 浏览量 2018-08-01 18:06:10 上传评论收藏 140KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

echarts_demo.rar （3个子文件）

echarts_demo

westeros.js 14KB

echarts.common.min.js 442KB

demo.html 5KB

<!doctype html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title></title> </head> <body> <div id="echart_id" style="width:900px;height:600px"></div> <div id="echart_line_id" style="width:900px;height:600px"></div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="echarts.common.min.js"></script> <script type="text/javascript" src="westeros.js"></script> <script type="text/javascript"> var xarr = ['整体','开屏','弹窗','首页轮播','课程页轮播']; var yarr1 = [102,81,23,59,14]; var yarr2 = [12,41,63,29,74]; showBar(xarr,yarr1,yarr2); function showBar(xarr,yarr1,yarr2){ // 基于准备好的dom，初始化echarts图表 var classRatechart = document.getElementById('echart_id'); //设置数据 var option = { color: ['#3398DB'], //设置提示 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function(params){ var res = ""; if(typeof(params) != "undefined"){ res += params[0].name+"<br>"; for(var i=0;i<params.length;i++){ if(typeof(params[i].value) != 'undefined'){ res += params[i].seriesName+" : "+params[i].value+"<br>"; } } } return res; } }, legend: { nameLocation:'middle', data:['曝光量','点击量'] }, grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true }, //设置坐标轴 xAxis : [ { //name : '广告名称', nameLocation:'middle', type : 'category', nameGap:40, data : xarr, axisLabel: { rotate: 30,//x轴文字倾斜角度 interval:0//显示全部柱状子节点 }, nameTextStyle: { fontStyle:'oblique' } } ], yAxis : [ { type:'value' } ], //设置数据 series : [ { name:'曝光量', type:'bar', data:yarr1, barWidth:'30',//设置柱条宽度 // barMaxWidth:'50'//柱条（K线蜡烛）最大宽度，不设时自适应 itemStyle: { normal: { color: '#E4E4E4' } } }, { name:'点击量', type:'bar', data:yarr2, barWidth:'30',//设置柱条宽度 // barMaxWidth:'50'//柱条（K线蜡烛）最大宽度，不设时自适应 itemStyle: { normal: { color: '#C9C9C9' } } } ] }; var myChart = echarts.init(classRatechart,'westeros'); // 为echarts对象加载数据 myChart.setOption(option); } showLine(); function showLine(){ // 基于准备好的dom，初始化echarts图表 var statchart = document.getElementById('echart_line_id'); option = { title: { text: '统计图表' }, tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data:[{name:'曝光次数',textStyle:{color:'#F56E4E'}}, {name:'点击次数',textStyle:{color:'#585E6E'}} ], color:['#F56E4E','#585E6E'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'曝光次数', type:'line', stack: '总量', lineStyle: {normal: {color: '#F56E4E'}}, areaStyle: {normal: {color: '#F56E4E'}}, itemStyle: {normal: {color: '#F56E4E'}}, data:[150, 232, 201, 154, 190, 330, 410] }, { name:'点击次数', type:'line', stack: '总量', lineStyle: {normal: {color: '#585E6E'}}, areaStyle: {normal: {color: '#585E6E'}}, itemStyle: {normal: {color: '#585E6E'}}, data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; var myChart = echarts.init(statchart,'westeros'); // 为echarts对象加载数据 myChart.setOption(option); } </script> </body> </html>

评论收藏

内容反馈