echarts图表
define([ 'jquery', 'echarts' ], function($, echarts) { var chartModel = { chartArr: [], // x y轴颠倒图表默认配置项 chartReverseOpt: { tooltip : { trigger: 'axis', confine: true, axisPointer : { type : 'shadow' } }, legend: { bottom: 0, left: 'center', data: [] }, grid: { top: '3%', left: '3%', right: '4%', bottom: '10%', containLabel: true }, xAxis: { type: 'value', axisLine: { // 横轴样式 show: false, lineStyle: { color: '#acbccf' //边框颜色 } }, axisLabel: { interval: 0, textStyle: { // 横轴文本样式 fontSize: 12, color: '#666' } }, splitLine: { lineStyle: { // 竖直方向线条样式 color: '#a4adb8' //横线颜色 } } }, yAxis: { type: 'category', data: [], axisLine: { // 纵轴样式 show: true, lineStyle: { color: '#bfbfbf' //底部边框颜色 } }, axisLabel: { textStyle: { // 纵轴文本样式 fontSize: 12, color: '#666' } }, splitLine: { show: false, lineStyle: { // 水平方向线条样式 type: 'solid', color: '#a4adb8' //横线颜色 } } }, series: [] }, // x y轴正常图表默认配置项 chartNormalOpt: { tooltip : { trigger: 'axis', confine: true, axisPointer : { type: 'shadow', // cross 通过虚线标识出y轴对于的值 crossStyle: { color: '#999' } } }, legend: { bottom: 0, left: 'center', data: [] }, grid: { top: '3%', left: '3%', right: '4%', bottom: '10%', containLabel: true }, xAxis: { type: 'category', data: [], axisPointer: { type: 'shadow' }, axisLine: { // 横轴样式 show: true, lineStyle: { // type:'dotted', color: '#acbccf' //边框颜色 } }, axisLabel: { rotate: 0, interval: 0, textStyle: { // 横轴文本样式 fontSize: 12, color: '#666' } }, splitLine: { lineStyle: { // 竖直方向线条样式 color: '#a4adb8' //横线颜色 } } }, yAxis: [{ type: 'value', axisLine: { // 纵轴样式 show: true, lineStyle: { color: '#bfbfbf' //底部边框颜色 } }, axisLabel: { textStyle: { // 纵轴文本样式 fontSize: 12, color: '#666' } }, splitLine: { show: false, lineStyle: { // 水平方向线条样式 color: '#a4adb8' //横线颜色 } } }], series: [] }, // 右侧纵轴配置 yAxisRight: { type: 'value', position: 'right', axisLine: { // 纵轴样式 show: true, lineStyle: { color: '#bfbfbf' //底部边框颜色 } }, axisLabel: { formatter: '{value}%', textStyle: { // 纵轴文本样式 fontSize: 12, color: '#666' } }, splitLine: { show: false } }, /** * 初始化图表x y轴颠倒 * @param {[type]} params [description] * @return [description] */ initChartReverse: function (id, keyMap, data, opt) { var chart = echarts.init(document.getElementById(id)), option = JSON.parse(JSON.stringify(chartModel.chartReverseOpt)); if ($('#' + id).find('canvas').length == 0) { chartModel.chartArr.push(chart); } option.legend.data = chartModel.getLegendData(keyMap); option.yAxis.data = chartModel.getAxisData(data, opt.keyAxis); option.series = chartModel.getSeries(data, keyMap); chart.setOption(option); chart.resize(); }, /** * 初始化图表 正常图表 * @param {[type]} params [description] * @return [description] */ initChartNormal: function (id, keyMap, data, opt) { var chart = echarts.init(document.getElementById(id)), option = JSON.parse(JSON.stringify(chartModel.chartNormalOpt)); if ($('#' + id).find('canvas').length == 0) { chartModel.chartArr.push(chart); } if (opt.showRightYaxis) { // 添加右侧Y轴 option.yAxis.push(chartModel.yAxisRight); } option.xAxis.axisLabel.rotate = opt.rotate ? opt.rotate : 0; option.legend.data = chartModel.getLegendData(keyMap); option.xAxis.data = chartModel.getAxisData(data, opt.keyAxis); option.series = chartModel.getSeries(data, keyMap); chart.setOption(option); chart.resize(); }, /** * 获取图表legend * @param {[type]} params [description] * @return [description] */ getLegendData: function (keyMap) { var legendData = keyMap.map(function (item) { return item.name; }); return legendData; }, /** * 获取坐标轴刻度名称 * @param {[type]} params [description] * @return [description] */ getAxisData: function (data, keyAxis) { var axisData = data.map(function (item) { return item[keyAxis]; }); return axisData; }, /** * 获取图表数据 * @param {[type]} params [description] * @return [description] */ getSeries: function (data, keyMap) { var seriesData = []; for (var i = 0; i < keyMap.length; i++) { var obj = { name: keyMap[i].name, type: keyMap[i].type, // 图表类型 stack: keyMap[i].stack ? true : false, // 显示堆叠 data: [] // 图表数据 }; if (keyMap[i].yAxisIndex) { // 该条数据使用右侧y轴坐标刻度展示 obj.yAxisIndex = keyMap[i].yAxisIndex; } if (keyMap[i].showLabel) { // 显示堆叠上面的value值 obj.label = { normal: { show: true, position: 'insideRight' } }; } var key = keyMap[i].key; for (var j = 0; j < data.length; j++) { obj.data.push(data[j][key]); } seriesData.push(obj); } return seriesData; } }; // 窗口大小改变 重绘图表 window.onresize = function () { for (var i = 0; i < chartModel.chartArr.length; i++) { chartModel.chartArr[i].resize(); } }; return chartModel; });
使用
渲染x y轴颠倒的图表
var keyMap = [{ name: '累计完成', key: 'ljwc', type: 'bar', stack: true, // 是否叠加 showLabel: true // 是否在对应位置显示value }, { name: '预测完成', key: 'ycwc', type: 'bar', stack: true, showLabel: true }]; var data = [{ yname: '收入毛利', ljwc: 320, ycwc: 120 }, { yname: '回款', ljwc: 302, ycwc: 132 }]; var opt = { keyAxis: 'yname' // 坐标轴对应刻度名称 }; chartModel.initChartReverse('chart1', keyMap, data, opt);
渲染正常x y轴图表数据
var keyMap2 = [{ name: '目标', key: 'mb', type: 'bar' }{ name: '预测完成率', key: 'ycwcl', type: 'line', yAxisIndex: 1 // 该条数据使用右侧y轴坐标刻度展示 }]; var data2 = [{ xname: '华南', ycwcl: 80, mb: 220 }, { xname: '云贵渝', ycwcl: 182, mb: 182 }]; var opt2 = { keyAxis: 'xname', // 坐标轴对应刻度名称 showRightYaxis: true, // 显示右侧纵轴 rotate: 30 }; chartModel.initChartNormal('chart2', keyMap2, data2, opt2);
效果图
