function echarts_1(data) { const myChart = echarts.init(document.getElementById('main1')) const option = { xAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, boundaryGap: false, // 坐标轴两边不留白 // 标签文字样式修改 axisLabel: { color: '#9DA5AF', margin: 12, rich: { a: { padding: [0, 0, 0, 10] // 左边距 40 }, b: { padding: [0, 10, 0, 0] // 右边距 40 } } }, type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value', //背景线 splitLine: { lineStyle: { type: 'dashed', color: ['#EDEEF1'] } }, axisLabel: { color: '#9DA5AF', margin: 20 } }, tooltip: { trigger: 'axis', formatter: params => { const title = `
${params[0].axisValue}
` let content = '' params.forEach(item => { content += `
${item.seriesName}:${item.value}
` }) return title + content } }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, // legend: { // orient: 'horizontal', //设置图例朝向 // bottom: 'bottom', // color:'red', // }, series: [ { name: '项目数量', type: 'line', smooth: true, symbol: 'circle', symbolSize: 8, itemStyle: { color: '#187FDD', normal: { color: '#fff', borderColor: '#187FDD', } }, lineStyle: { // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置 color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'rgb(72,177,203)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(72,116,203)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, width: 4, }, itemStyle: { color: '#FFFFFF', borderColor: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgb(72,177,203)', //0%处的颜色 }, { offset: 1, color: 'rgb(72,177,203)', //100%处的颜色 }, ], global: false, borderWidth: 4, }, }, areaStyle: { normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(72,177,203,0.39)' }, { offset: .34, color: 'rgba(56,155,255,0.25)' }, { offset: 1, color: 'rgba(38,197,254,0.00)' }]) } },//区域颜色渐变 // color: '#4bc8db', data: [data['all_sent_review_cost']['1']['project_number'], data['all_sent_review_cost']['2']['project_number'], data['all_sent_review_cost']['3']['project_number'], data['all_sent_review_cost']['4']['project_number'], data['all_sent_review_cost']['5']['project_number'], data['all_sent_review_cost']['6']['project_number'], data['all_sent_review_cost']['7']['project_number'], data['all_sent_review_cost']['8']['project_number'], data['all_sent_review_cost']['9']['project_number'], data['all_sent_review_cost']['10']['project_number'], data['all_sent_review_cost']['11']['project_number'], data['all_sent_review_cost']['12']['project_number'],] } ] } myChart.setOption(option); //响应式布局 // const resize = _.throttle(() => { // myChart.resize() // }, 1000) // window.addEventListener('resize', resize) } function echarts_2(data) { const myChart = echarts.init(document.getElementById('main2')) const option = { legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom', }, tooltip: {}, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, dataset: { source: [ ['product', '送审金额', '审定金额'], ['1月', data['all_sent_review_cost']['1']['all_sent_amount'], data['all_sent_review_cost']['1']['all_authorize_amount']], ['2月', data['all_sent_review_cost']['2']['all_sent_amount'], data['all_sent_review_cost']['2']['all_authorize_amount']], ['3月', data['all_sent_review_cost']['3']['all_sent_amount'], data['all_sent_review_cost']['3']['all_authorize_amount']], ['4月', data['all_sent_review_cost']['4']['all_sent_amount'], data['all_sent_review_cost']['4']['all_authorize_amount']], ['5月', data['all_sent_review_cost']['5']['all_sent_amount'], data['all_sent_review_cost']['5']['all_authorize_amount']], ['6月', data['all_sent_review_cost']['6']['all_sent_amount'], data['all_sent_review_cost']['6']['all_authorize_amount']], ['7月', data['all_sent_review_cost']['7']['all_sent_amount'], data['all_sent_review_cost']['7']['all_authorize_amount']], ['8月', data['all_sent_review_cost']['8']['all_sent_amount'], data['all_sent_review_cost']['8']['all_authorize_amount']], ['9月', data['all_sent_review_cost']['9']['all_sent_amount'], data['all_sent_review_cost']['9']['all_authorize_amount']], ['10月', data['all_sent_review_cost']['10']['all_sent_amount'], data['all_sent_review_cost']['10']['all_authorize_amount']], ['11月', data['all_sent_review_cost']['11']['all_sent_amount'], data['all_sent_review_cost']['11']['all_authorize_amount']], ['12月', data['all_sent_review_cost']['12']['all_sent_amount'], data['all_sent_review_cost']['12']['all_authorize_amount']], ] }, xAxis: { type: 'category', axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, }, yAxis: {}, // Declare several bar series, each will be mapped // to a column of dataset.source by default. series: [ { type: 'bar', itemStyle: { barBorderRadius: [7, 7, 0, 0], }, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#18c1f6' // 0% 处的颜色 }, { offset: 1, color: '#5199f4' // 100% 处的颜色 }], global: false // 缺省为 false }, }, { type: 'bar', itemStyle: { barBorderRadius: [7, 7, 0, 0], }, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgb(251,189,108)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(251,163,99)' // 100% 处的颜色 }], global: false // 缺省为 false }, } ] } myChart.setOption(option); } function echarts_3(data) { const myChart = echarts.init(document.getElementById('main3')) const option = { xAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value' }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom' }, tooltip: {}, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, series: [ { name: '送审服务费', data: [data['all_sent_review_cost']['1']['all_sent_review_cost'], data['all_sent_review_cost']['2']['all_sent_review_cost'], data['all_sent_review_cost']['3']['all_sent_review_cost'], data['all_sent_review_cost']['4']['all_sent_review_cost'], data['all_sent_review_cost']['5']['all_sent_review_cost'], data['all_sent_review_cost']['6']['all_sent_review_cost'], data['all_sent_review_cost']['7']['all_sent_review_cost'], data['all_sent_review_cost']['8']['all_sent_review_cost'], data['all_sent_review_cost']['9']['all_sent_review_cost'], data['all_sent_review_cost']['10']['all_sent_review_cost'], data['all_sent_review_cost']['11']['all_sent_review_cost'], data['all_sent_review_cost']['12']['all_sent_review_cost']], type: 'bar', // color:'#2452b2', itemStyle: { // 使用方法二的写法 barBorderRadius: [7, 7, 0, 0], color: { type: 'linear', x: 0, //右 y: 0, //下 x2: 0, //左 y2: 1, //上 colorStops: [ { offset: 0, color: 'rgb(73,119,193)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(159,175,209)' // 100% 处的颜色 } ] }, }, } ] } myChart.setOption(option); } function echarts_4(data) { const myChart = echarts.init(document.getElementById('main4')) const option = { tooltip: { trigger: 'item' }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom' }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, series: [ { name: '送审总额占比分布图', type: 'pie', radius: '50%', data: [ { value: data['sentAndaAuthorize']['0']['all_amount'], name: '预算总额', itemStyle: { color: 'rgb(116,195,225)' } }, { value: data['sentAndaAuthorize']['1']['all_amount'], name: '结算总额', itemStyle: { color: 'rgb(241,103,106)' } }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } myChart.setOption(option); } function echarts_5(data) { const myChart = echarts.init(document.getElementById('main5')) let review = data['review_poportion']; let name = []; let set = []; for (let i = 0; i < review.length; i++) { if (review[i]['project_number'] != 0) { name.push(review[i]['entrust_unit_name']) set.push(review[i]['project_number']) } } const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom', }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, type: 'category', data: name }, series: [ { name: '项目数量', type: 'bar', data: set, itemStyle: { // 使用方法二的写法 color: { type: 'linear', x: 0, //右 y: 0, //下 x2: 1, //左 y2: 0, //上 colorStops: [ { offset: 0, color: 'rgb(254,221,148)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(209,230,165)' // 100% 处的颜色 } ] }, }, }, ] }; myChart.setOption(option); } function echarts_6(data) { const myChart = echarts.init(document.getElementById('main6')) let review = data['sent_review_amount_top']; let name = []; let set = []; for (let i = 0; i < review.length; i++) { if (review[i]['all_sent_amount'] != 0) { name.push(review[i]['entrust_unit_name']) set.push(review[i]['all_sent_amount']) } } const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom', }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, type: 'category', data: name }, series: [ { name: '送审总额', type: 'bar', data: set, itemStyle: { // 使用方法二的写法 color: { type: 'linear', x: 0, //右 y: 0, //下 x2: 1, //左 y2: 0, //上 colorStops: [ { offset: 0, color: 'rgb(229,221,233)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(189,194,232)' // 100% 处的颜色 } ] }, }, }, ] }; myChart.setOption(option); } function echarts_7(data) { console.log(data) const myChart = echarts.init(document.getElementById('main7')) let review = data['authorize_amount_top']; let name = []; let set = []; for (let i = 0; i < review.length; i++) { if (review[i]['all_authorize_amount'] != 0) { name.push(review[i]['entrust_unit_name']) set.push(review[i]['all_authorize_amount']) } } const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom', }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, type: 'category', data: name }, series: [ { name: '审定总额', type: 'bar', data: set, itemStyle: { // 使用方法二的写法 color: { type: 'linear', x: 0, //右 y: 0, //下 x2: 1, //左 y2: 0, //上 colorStops: [ { offset: 0, color: 'rgb(229,221,233)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(189,194,232)' // 100% 处的颜色 } ] }, }, }, ] }; myChart.setOption(option); } function echarts_8(data) { const myChart = echarts.init(document.getElementById('main8')) let review = data['sent_number_top']; let name = []; let set = []; for (let i = 0; i < review.length; i++) { if (review[i]['project_number'] != 0) { name.push(review[i]['sent_review_unit_name']) set.push(review[i]['project_number']) } } const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom', }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, type: 'category', data: name }, series: [ { name: '项目数量', type: 'bar', data: set, itemStyle: { // 使用方法二的写法 color: { type: 'linear', x: 0, //右 y: 0, //下 x2: 1, //左 y2: 0, //上 colorStops: [ { offset: 0, color: 'rgb(254,221,148)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(209,230,165)' // 100% 处的颜色 } ] }, }, }, ] }; myChart.setOption(option); } function echarts_9(data) { const myChart = echarts.init(document.getElementById('main9')) let review = data['sent_poportion']; let name = []; let set = []; for (let i = 0; i < review.length; i++) { if (review[i]['all_sent_amount'] != '') { name.push(review[i]['sent_review_unit_name']) set.push(review[i]['all_sent_amount']) } } const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom', }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { axisLine: { show: false // 隐藏轴线 }, axisTick: { show: false // 隐藏分隔线 }, type: 'category', data: name }, series: [ { name: '送审总额', type: 'bar', data: set, itemStyle: { // 使用方法二的写法 color: { type: 'linear', x: 0, //右 y: 0, //下 x2: 1, //左 y2: 0, //上 colorStops: [ { offset: 0, color: 'rgb(72,177,203)' // 0% 处的颜色 }, { offset: 1, color: 'rgb(72,116,203)' // 100% 处的颜色 } ] }, }, }, ] }; myChart.setOption(option); } function echarts_10(data) { const myChart = echarts.init(document.getElementById('main10')) let review = data['sent_poportion']; let set = []; for (let i = 0; i < review.length; i++) { if (review[i]['all_sent_amount'] != '') { set.push({ value: review[i]['all_sent_amount'], name: review[i]['sent_review_unit_name'] }) } } const option = { tooltip: { trigger: 'item' }, legend: { orient: 'horizontal', //设置图例朝向 bottom: 'bottom' }, grid: { left: '3%', right: '4%', top: '10%', bottom: '15%', containLabel: true }, series: [ { name: '送审单位送审总额占比图', type: 'pie', radius: '50%', data: set, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } myChart.setOption(option); }