/** * echarts简单封装 * 冯海夫 * 20201008 */ var ChartsService = { // 大间隔 getGridSpanBig:function(){ return { grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" } }; }, // 小间隔 getGridSpanSmall:function(){ return { grid:{ left:"10%", right:"10%", bottom:"15%", top:"10%" } }; }, // 通用的柱状图 // divId:待显示的div id, data:json对象 initCommonBar: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); const xDataList = []; const yDataList = []; for (var val in data) { xDataList.push(val); yDataList.push(data[val]); } var option = { color: ['#37a2da'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, xAxis: { type: 'category', data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } // , // interval:0, // rotate:30 , //换行显示 formatter: function(value) { let result = '' //拼接加\n返回的类目项 let maxLength = 5 //每项显示文字个数 let valLength = value.length //X轴类目项的文字个数 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 if (rowNumber > 1) { //如果文字大于3, for (let i = 0; i < rowNumber; i++) { let temp = '' //每次截取的字符串 let start = i * maxLength //开始截取的位置 let end = start + maxLength //结束截取的位置 temp = value.substring(start, end) + '\n' result += temp //拼接生成最终的字符串 } return result } else { return value } } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ data: yDataList, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#ffffff' } } } }, }] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, initCommonBar2: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); const xDataList = []; const yDataList = []; for (var val in data) { xDataList.push(val); yDataList.push(data[val]); } var option = { color: ['#37a2da'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, xAxis: { type: 'category', data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } // , // interval:0, // rotate:30 , //换行显示 formatter: function(value) { let result = '' //拼接加\n返回的类目项 let maxLength = 5 //每项显示文字个数 let valLength = value.length //X轴类目项的文字个数 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 if (rowNumber > 1) { //如果文字大于3, for (let i = 0; i < rowNumber; i++) { let temp = '' //每次截取的字符串 let start = i * maxLength //开始截取的位置 let end = start + maxLength //结束截取的位置 temp = value.substring(start, end) + '\n' result += temp //拼接生成最终的字符串 } return result } else { return value } } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, formatter:'{value}%', textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ data: yDataList, type: 'bar', showBackground: false, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, itemStyle: { normal: { label: { show: true, position: 'top', formatter: '{c}%',//显示百分号 textStyle: { color: '#ffffff' } } } }, }] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, // 带阴影柱状图柱状图 // divId:待显示的div id, data:json对象 initBarWithShade: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); const xDataList = []; const yDataList = []; for (var val in data) { xDataList.push(val); yDataList.push(data[val]); } var option = { color: ['#37a2da'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, xAxis: { type: 'category', data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 }, // interval:0, // rotate:30 //换行显示 formatter: function(value) { let result = '' //拼接加\n返回的类目项 let maxLength = 5 //每项显示文字个数 if(divId==="charts_33"){ maxLength=2 } let valLength = value.length //X轴类目项的文字个数 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 if (rowNumber > 1) { //如果文字大于3, for (let i = 0; i < rowNumber; i++) { let temp = '' //每次截取的字符串 let start = i * maxLength //开始截取的位置 let end = start + maxLength //结束截取的位置 temp = value.substring(start, end) + '\n' result += temp //拼接生成最终的字符串 } return result } else { return value } } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ data: yDataList, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#ffffff' } } } }, }] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, // 上下两端都有数字的柱状图,算比例 // divId:待显示的div id, data:json数组,label,sum1:下柱数,sum2:总熟 initBarWithTwoNumberRate: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); const xDataList = []; const yDataList = []; const yDataList2 = [] $.each(data, function (index, item) { xDataList.push(item.label); const sum1 = (item.sum1 / item.sum2 * 100).toFixed(0); yDataList.push(sum1); yDataList2.push(100 - sum1); }); var option = { color: ['#37a2da', '#FF4040'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, xAxis: { type: 'category', data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 }, // interval:0, // rotate:30 //换行显示 formatter: function(value) { let result = '' //拼接加\n返回的类目项 let maxLength = 5 //每项显示文字个数 let valLength = value.length //X轴类目项的文字个数 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 if (rowNumber > 1) { //如果文字大于3, for (let i = 0; i < rowNumber; i++) { let temp = '' //每次截取的字符串 let start = i * maxLength //开始截取的位置 let end = start + maxLength //结束截取的位置 temp = value.substring(start, end) + '\n' result += temp //拼接生成最终的字符串 } return result } else { return value } } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, formatter:'{value}%', textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 12 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ name: '打卡', type: 'bar', stack: '总量', label: { show: true, formatter: '{c}%',//显示百分号 position: 'insideRight' }, showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, data: yDataList } // , // { // name: '未打卡', // type: 'bar', // stack: '总量', // label: { // show: false, // formatter: '{c}%',//显示百分号 // position: 'insideRight' // }, // data: yDataList2 // } ] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, // 折线图,带阴影 // divId:待显示的div id, data:json对象 initLineWithShade: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); const xDataList = []; const yDataList = []; for (var val in data) { xDataList.push(val); yDataList.push(data[val]); } var option = { color: ['#37a2da'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, xAxis: { type: 'category', boundaryGap: false, data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 }, interval:0, rotate:30 }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ data: yDataList, type: 'line', areaStyle: {}, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#ffffff' } } } } }] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, // 通用的饼图 // divId:待显示的div id, data:json对象 initCommonPie: function (divId, data, colorList) { var myChart = echarts.init(document.getElementById(divId)); const chartData = []; var total = 0; for (var val in data) { total += data[val] * 1; } for (var val in data) { //const desc = val + " " + data[val] + " " + (data[val] * 1 / total * 100).toFixed(1) + "%"; const desc = val + " " + (data[val] * 1 / total * 100).toFixed(1) + "%"; chartData.push({ value: data[val], name: desc }); } var option = { color: ['#37a2da', '#ffd85c', '#67e0e3', '#ff9f7f'], title: { text: '', subtext: '', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)' }, series: [{ name: '', type: 'pie', radius: '100%', center: ['50%', '50%'], data: chartData, label: { normal: { show: true, position: 'inner' } }, emphasis: { itemStyle: { shadowBlur: 0, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; if (colorList != null && colorList != undefined){ option.color = colorList; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, // 仪表盘 // divId:待显示的div id, data:json对象:name,value initCommonPanel: function (divId, data) { var myChart = echarts.init(document.getElementById(divId)); const dataList = []; dataList.push(data); var option = { tooltip: { formatter: '{a}
{b} : {c}%' }, series: [{ radius:"100%", name: '', type: 'gauge', detail: { formatter: '{value}%' }, data: dataList, title: { textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 12 //更改坐标轴文字大小 } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, // 柱状图和折线图对吧 // divId:待显示的div id, data:json数组:label-x坐标名称,label1-y1名称,label2-y2名称,sum1-y1数量,sum2-y2数量 initBarAndLine: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); if (data.length == 0) return; const yLabel1 = data[0].label1; const yLabel2 = data[0].label2; const xDataList = []; const yDataList1 = []; const yDataList2 = []; $.each(data, function (index, item) { xDataList.push(item.label); yDataList1.push(item.sum1); yDataList2.push(item.sum2); }); // option2 = { // color: ['#ff9f7f', '#ffd85c'], // grid:{ // left:"20%", // right:"10%", // bottom:"25%", // top:"10%" // }, // xAxis: { // type: 'category', // boundaryGap: false, // data: xDataList, // axisLabel: { // show: true, // textStyle: { // color: '#ffffff', //更改坐标轴文字颜色 // fontSize: 14 //更改坐标轴文字大小 // }, // // interval:0, // // rotate:30 // //换行显示 // formatter: function(value) { // let result = '' //拼接加\n返回的类目项 // let maxLength = 5 //每项显示文字个数 // let valLength = value.length //X轴类目项的文字个数 // let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 // if (rowNumber > 1) { // //如果文字大于3, // for (let i = 0; i < rowNumber; i++) { // let temp = '' //每次截取的字符串 // let start = i * maxLength //开始截取的位置 // let end = start + maxLength //结束截取的位置 // temp = value.substring(start, end) + '\n' // result += temp //拼接生成最终的字符串 // } // return result // } else { // return value // } // } // }, // axisLine: { // lineStyle: { // type: 'solid', // color: '#37a2da', //左边线的颜色 // width: '1' //坐标线的宽度 // } // }, // splitLine: { // show: false // } // }, // yAxis: { // type: 'value', // axisLabel: { // show: true, // textStyle: { // color: '#ffffff', //更改坐标轴文字颜色 // fontSize: 14 //更改坐标轴文字大小 // } // }, // axisLine: { // lineStyle: { // type: 'solid', // color: '#37a2da', //左边线的颜色 // width: '1' //坐标线的宽度 // } // }, // splitLine: { // show: true, // lineStyle: { // color: ['#37a2da'], // width: 1, // type: 'solid' // } // } // }, // series: [{ // data: yDataList1, // type: 'line', // stack: '总量', // label: { // show: true // }, // }, // { // data: yDataList2, // type: 'line', // label: { // show: true // }, // } // ] // }; var option = { color: ['#ff9f7f', '#ffd85c'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, tooltip: { trigger: 'axis' }, legend: { data: [{ name: yLabel1, textStyle: { color: '#ffffff' } }, { name: yLabel2, textStyle: { color: '#ffffff' } } ] }, xAxis: { type: 'category', axisTick: { alignWithLabel: true }, data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 }, // interval:0, // rotate:30 //换行显示 formatter: function(value) { let result = '' //拼接加\n返回的类目项 let maxLength = 5 //每项显示文字个数 let valLength = value.length //X轴类目项的文字个数 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 if (rowNumber > 1) { //如果文字大于3, for (let i = 0; i < rowNumber; i++) { let temp = '' //每次截取的字符串 let start = i * maxLength //开始截取的位置 let end = start + maxLength //结束截取的位置 temp = value.substring(start, end) + '\n' result += temp //拼接生成最终的字符串 } return result } else { return value } } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ name: yLabel1, type: 'line', stack: '总量', label: { show: true } , data: yDataList1 }, { name: yLabel2, type: 'bar', stack: '总量2', label: { show: true }, data: yDataList2 } ] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, initBarAndLine2: function (divId, data, grid) { var myChart = echarts.init(document.getElementById(divId)); if (data.length == 0) return; const yLabel1 = data[0].label1; const yLabel2 = data[0].label2; const xDataList = []; const yDataList1 = []; const yDataList2 = []; $.each(data, function (index, item) { xDataList.push(item.label); yDataList1.push(item.sum1); yDataList2.push(item.sum2); }); // option2 = { // color: ['#ff9f7f', '#ffd85c'], // grid:{ // left:"20%", // right:"10%", // bottom:"25%", // top:"10%" // }, // xAxis: { // type: 'category', // boundaryGap: false, // data: xDataList, // axisLabel: { // show: true, // textStyle: { // color: '#ffffff', //更改坐标轴文字颜色 // fontSize: 14 //更改坐标轴文字大小 // }, // // interval:0, // // rotate:30 // //换行显示 // formatter: function(value) { // let result = '' //拼接加\n返回的类目项 // let maxLength = 5 //每项显示文字个数 // let valLength = value.length //X轴类目项的文字个数 // let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 // if (rowNumber > 1) { // //如果文字大于3, // for (let i = 0; i < rowNumber; i++) { // let temp = '' //每次截取的字符串 // let start = i * maxLength //开始截取的位置 // let end = start + maxLength //结束截取的位置 // temp = value.substring(start, end) + '\n' // result += temp //拼接生成最终的字符串 // } // return result // } else { // return value // } // } // }, // axisLine: { // lineStyle: { // type: 'solid', // color: '#37a2da', //左边线的颜色 // width: '1' //坐标线的宽度 // } // }, // splitLine: { // show: false // } // }, // yAxis: { // type: 'value', // axisLabel: { // show: true, // textStyle: { // color: '#ffffff', //更改坐标轴文字颜色 // fontSize: 14 //更改坐标轴文字大小 // } // }, // axisLine: { // lineStyle: { // type: 'solid', // color: '#37a2da', //左边线的颜色 // width: '1' //坐标线的宽度 // } // }, // splitLine: { // show: true, // lineStyle: { // color: ['#37a2da'], // width: 1, // type: 'solid' // } // } // }, // series: [{ // data: yDataList1, // type: 'line', // stack: '总量', // label: { // show: true // }, // }, // { // data: yDataList2, // type: 'line', // label: { // show: true // }, // } // ] // }; var option = { color: ['#ff9f7f', '#37a2da'], grid:{ left:"20%", right:"10%", bottom:"25%", top:"10%" }, tooltip: { trigger: 'axis' }, legend: { data: [{ name: yLabel1, textStyle: { color: '#ffffff' } }, { name: yLabel2, textStyle: { color: '#ffffff' } } ] }, xAxis: { type: 'category', axisTick: { alignWithLabel: true }, data: xDataList, axisLabel: { show: true, textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 }, // interval:0, // rotate:30 //换行显示 formatter: function(value) { let result = '' //拼接加\n返回的类目项 let maxLength = 5 //每项显示文字个数 let valLength = value.length //X轴类目项的文字个数 let rowNumber = Math.ceil(valLength / maxLength) //类目项需要换行的行数 if (rowNumber > 1) { //如果文字大于3, for (let i = 0; i < rowNumber; i++) { let temp = '' //每次截取的字符串 let start = i * maxLength //开始截取的位置 let end = start + maxLength //结束截取的位置 temp = value.substring(start, end) + '\n' result += temp //拼接生成最终的字符串 } return result } else { return value } } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: false } }, yAxis: { type: 'value', axisLabel: { show: true, formatter:'{value}%', textStyle: { color: '#ffffff', //更改坐标轴文字颜色 fontSize: 14 //更改坐标轴文字大小 } }, axisLine: { lineStyle: { type: 'solid', color: '#37a2da', //左边线的颜色 width: '1' //坐标线的宽度 } }, splitLine: { show: true, lineStyle: { color: ['#37a2da'], width: 1, type: 'solid' } } }, series: [{ name: yLabel1, type: 'line', stack: '总量', label: { show: false } , data: yDataList1 }, { name: yLabel2, type: 'bar', stack: '总量2', label: { show: true, formatter: '{c}%',//显示百分号 fontSize:16 }, data: yDataList2 } ] }; if (grid != null && grid != undefined){ option.grid = grid; } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }, }