|
|
|
|
@ -279,7 +279,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 柱状+折线图
|
|
|
|
|
const barChartAndLineChart = function (data, id,rotate=0) {
|
|
|
|
|
const barChartAndLineChart = function (data, id, rotate = 0) {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = {
|
|
|
|
|
@ -325,8 +325,8 @@ const barChartAndLineChart = function (data, id,rotate=0) {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
rotate:rotate,
|
|
|
|
|
interval:0,
|
|
|
|
|
rotate: rotate,
|
|
|
|
|
interval: 0,
|
|
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#d1e6eb",
|
|
|
|
|
@ -667,7 +667,7 @@ const barChartAndLineChartThree = function (data, id) {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval:0,
|
|
|
|
|
interval: 0,
|
|
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#d1e6eb",
|
|
|
|
|
@ -946,19 +946,22 @@ const barChartAndLineChartFour = function (data, id) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 折线图
|
|
|
|
|
const lineChart = function (data, id) {
|
|
|
|
|
const lineChart = function (data, id,unit='') {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = {
|
|
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
|
|
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
|
|
|
|
|
yDataName: "提升百分比"
|
|
|
|
|
yDataName: "提升百分比",
|
|
|
|
|
yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
|
|
|
|
|
yDataTwoName: "百分比"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let min = Math.ceil(Math.min(...data.yData))
|
|
|
|
|
let max = Math.ceil(Math.max(...data.yData))
|
|
|
|
|
let option = {
|
|
|
|
|
grid: {
|
|
|
|
|
top: '34%',
|
|
|
|
|
top: '20%',
|
|
|
|
|
left: '5%',
|
|
|
|
|
right: '5%',
|
|
|
|
|
bottom: '8%',
|
|
|
|
|
@ -976,13 +979,13 @@ const lineChart = function (data, id) {
|
|
|
|
|
legend: {
|
|
|
|
|
top: '5%',
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize:0.75*vw,
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
color: '#90cb5e',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data:data.xName,
|
|
|
|
|
data: data.xName,
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
@ -998,8 +1001,8 @@ const lineChart = function (data, id) {
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
min:min - 2,
|
|
|
|
|
max:100,
|
|
|
|
|
min: (min - 2 < 0) ? 0 : min - 2,
|
|
|
|
|
max: (max + 2 > 100) ? 100 : max + 2,
|
|
|
|
|
type: 'value',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#393939',
|
|
|
|
|
@ -1018,6 +1021,7 @@ const lineChart = function (data, id) {
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
formatter:`{c}${unit}`,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
},
|
|
|
|
|
@ -1043,7 +1047,7 @@ const lineChart = function (data, id) {
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
formatter:'{c}%',
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
@ -1056,6 +1060,37 @@ const lineChart = function (data, id) {
|
|
|
|
|
},
|
|
|
|
|
data: data.yData,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: data.yDataTwoName,
|
|
|
|
|
type: 'line',
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
|
|
symbolSize: 4, //标记的大小
|
|
|
|
|
itemStyle: {
|
|
|
|
|
//折线拐点标志的样式
|
|
|
|
|
color: '#5f3caf',
|
|
|
|
|
borderWidth: '2',
|
|
|
|
|
borderColor: '#462f84',
|
|
|
|
|
},
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#3094ea',
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#3254b8",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.5 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: data.yDataTwo,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -1065,9 +1100,8 @@ const lineChart = function (data, id) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 饼图
|
|
|
|
|
const pieChart = function (data, id,unit='次') {
|
|
|
|
|
const pieChart = function (data, id, unit = '次') {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
console.log(data)
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = [
|
|
|
|
|
{
|
|
|
|
|
@ -1154,7 +1188,7 @@ const pieChart = function (data, id,unit='次') {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 垂直柱状图
|
|
|
|
|
const verticalBarChart = function (data, id,unit='次') {
|
|
|
|
|
const verticalBarChart = function (data, id, unit = '次') {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = {
|
|
|
|
|
@ -1514,7 +1548,7 @@ const multipleVerticalBarChart = function (data, id) {
|
|
|
|
|
charts.setOption(option);
|
|
|
|
|
$(window).resize(charts.resize);
|
|
|
|
|
}
|
|
|
|
|
const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
|
|
|
|
|
const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = {
|
|
|
|
|
@ -1585,7 +1619,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
barWidth:'30%',
|
|
|
|
|
barWidth: '30%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
//图形样式
|
|
|
|
|
normal: {
|
|
|
|
|
@ -1609,8 +1643,8 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0,unit='') {
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
barWidth:'30%',
|
|
|
|
|
barGap:'40%',
|
|
|
|
|
barWidth: '30%',
|
|
|
|
|
barGap: '40%',
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
@ -1679,13 +1713,13 @@ const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: [data.yDataOneName, data.yDataTwoName,data.yDataThreeName,data.yDataFourName],
|
|
|
|
|
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
color: "#F1F1F3",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
dataZoom:[],
|
|
|
|
|
dataZoom: [],
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
@ -2545,7 +2579,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter:'{value}%',
|
|
|
|
|
formatter: '{value}%',
|
|
|
|
|
show: true,
|
|
|
|
|
color: '#fff',
|
|
|
|
|
interval: 0.5,
|
|
|
|
|
@ -2578,7 +2612,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
formatter:'{c}%',
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
@ -2606,7 +2640,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
formatter:'{c}%',
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
@ -2636,7 +2670,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
formatter:'{c}%',
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
@ -2666,7 +2700,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
formatter:'{c}%',
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
@ -2696,7 +2730,7 @@ const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
formatter:'{c}%',
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
|