Echarts图表使用案例

2019-11-06 08:24:52

字体：大中小

来源：转载

供稿：网友

柱状图 数据通过对象从后台动态获取。

<div id="main" style="width: 1100px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '订单柱状图' }, tooltip: { show: true }, dataZoom: [ { type: 'inside', //支持鼠标滚动缩放 start: 0, //默认数据初始缩放范围为10%到90% end: 100 } ], legend: { data:['订单数（个）'] //图例 }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'category', data : ["采购单数","线下订单数","C端社区订单数","C端全网订单数","退货订单数"] } ], yAxis : [ { name:'订单数 ', //Y轴提示 type : 'value', //min: 0, //max: 30, interval: 1, //Y轴数据跨度 //下面是显示格式化，一般来说还是用的上的 axisLabel: { formatter: '{value} 个' //Y轴单位 } } ], series : [ { "name":"社区店订单数", "type":"bar", "barWidth":"70", //柱子宽度 "data":[${orderCount.commCaiOrderCounts}, ${orderCount.commXianXiaOrderCounts}, ${orderCount.cCommOrderCounts}, ${orderCount.cCityOrderCounts},${orderCount.cZongTuiOrderCounts}], itemStyle:{ normal:{ color: function(params) { // build a color map as your need. var colorList = [ '#228B22','#008B00','#00CD00','#00CD66','#32CD32','#7CCD7C','#9ACD32' ]; return colorList[params.dataIndex] }, //以下为柱状图顶部是否显示，显示位置和显示格式的设置了 label: { show: true, position: 'top', formatter: '{b}/n{c}（个）' } } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>

这里写图片描述