今天在项目中需要写一个图示展示数据,然后项目中用的echarts 插件,本人没写过图示,第一次写,然后中间有问题去查找,感觉有点用,记录一下,以后用好找!
页面代码:
<div class="white-box"> <!-- 表格 --> <div id="main" style="width: 1500px;height:700px;"></div> </div>
没错,只需要有个状你画出来的图的div就行了!
js:
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var category_data=["普通票全价票","普通票半价票","团体票全价票","团体票半价票","网络票","TVM票","免费票"]; var newyearDate=[];//1 var oldyearDate=[];//2 var newMonthDate=[];//3 var oldMonthDate= [];//4 $.ajax({ url: "${ctx}/statistical/SalesComparison/comparison/date", method: 'post', //请求方法 dataType: "json", //类型json async: false,//设置为同步,不然newyearDate在ajax中有时间,但是在ajax外使用的时候还是为空 success:function(date){ date.forEach(function(item,i){ //取得数据的逻辑代码 if(item.status=='1'){ if(item.generalAllCount=='null' || typeof(item.generalAllCount)=='undefined'){ newyearDate.push(0); }else{ newyearDate.push(item.generalAllCount); } } }) },error:function (date) { } }) // 指定图表的配置项和数据 var option = { title: { text: '销售情况对比图示' }, tooltip: {}, legend: { data:['同比','环比'], color:['#da70d6','#C0FF3E'], selected: { '环比': false //初始化时不想显示的都设置成false,不然的话可以不要这个属性 } }, xAxis: [{ data:category_data }], yAxis: [{ type : 'value' //y轴显示数据值 }], series : [{ name: '同比', type: 'bar', itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 10 }, formatter: '{c}'+'(当年)'// {c}:data中的数据 } } }, data: newyearDate, color:"#da70d6" },{ name: '同比', type: 'bar', itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 10 }, formatter: '{c}'+'(上一年)' } } }, data: oldyearDate, color:"#87cefa" },{ name: '环比', type: 'bar', itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 10 }, formatter: '{c}'+'(当月)' } } }, data: newMonthDate, color:"#C0FF3E" },{ name: '环比', type: 'bar', itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 10 }, formatter: '{c}'+'(上一月)' } } }, data: oldMonthDate, color:"#DB7093" } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
效果图
一个简单地echarts柱状表格就实现了。