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);
}