let app = new Vue({
el: '#app',
data() {
return {
year: '2022',
config1: {
number: [100],
content: '{nt}个',
},
storageRecordConfig: {
header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
headerBGC: '#05507b33',
oddRowBGC: '#69c0ff0f',
evenRowBGC: '',
headerHeight: '40',
rowNum: 4,
align: ['center'],
data: [
['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
],
},
storageRecordConfig2: {
header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
headerBGC: '#05507b33',
oddRowBGC: '#05507b33',
evenRowBGC: '',
headerHeight: '40',
rowNum: 4,
align: ['center'],
data: [
['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
],
},
companyList: [
{ name: '山西焦煤' },
{ name: '晋能控股' },
{ name: '华新燃气' },
{ name: '山西建投' },
{ name: '潞安化工' },
{ name: '华远陆港' },
{ name: '航产集团' },
{ name: '大地控股' },
{ name: '国新能源' },
{ name: '汾酒集团' },
{ name: '云时代' },
{ name: '神农科技' },
{ name: '华阳新材' },
{ name: '华舰体育' },
{ name: '交控集团' },
{ name: '文旅集团' },
{ name: '水控集团' },
{ name: '太重集团' },
],
}
},
mounted() {
// 左侧图表
this.initChartL1()
this.initChartL2()
this.initChartR1()
},
methods: {
initChartL1() {
let myChart = echarts.init(this.$refs['echartL1'])
let option = {
grid: {
left: '10%',
top: '18%',
bottom: '12%',
right: '8%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#3D7495',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
},
},
},
yAxis: [
{
type: 'value',
name: '亿元',
nameTextStyle: {
color: '#FFF',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
}
],
series: [
{
type: 'pictorialBar',
barCategoryGap: '0%',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
label: {
show: true,
position: 'top',
distance: 5,
color: '#08DFFE',
fontSize: 12,
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9A11FF',
},
{
offset: 1,
color: '#08DFFE',
},
],
global: false, // 缺省为 false
},
},
emphasis: {
opacity: 1,
},
},
data: [123, 60, 25, 18, 12, 9],
},
],
}
myChart.setOption(option)
},
initChartL2() {
let myChart = echarts.init(this.$refs['echartL2'])
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '16%',
right: '3%',
left: '10%',
bottom: '10%',
},
legend: {
top: '1',
right: '10',
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
xAxis: {
data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#005094',
width: 1,
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255,255,255,0.6)', //X轴文字颜色
},
},
},
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#ebf8ac',
},
splitLine: {
show: true,
lineStyle: {
color: '#68b4dd66',
type: 'dashed',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#3D7495'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(250,250,250,0.6)',
},
},
},
],
series: [
{
name: '计划投资',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#69c0ff',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: [900, 600, 500, 450, 500],
},
{
name: '实际投资',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#957DFF',
},
{
offset: 1,
color: '#082550',
},
]),
},
},
data: [500, 900, 600, 800, 450],
},
],
}
myChart.setOption(option)
},
initChartR1() {
let myChart = echarts.init(this.$refs['echartR1'])
let option = {
tooltip: {
trigger: 'item'
},
legend: {
top: 'center',
orient: 'vertical',
right: '2%',
textStyle: {
color: '#9DB9EB'
}
},
series: [
{
name: '',
type: 'pie',
radius: ['55%', '80%'],
labelLine: {
normal: {
lineStyle: {
width: 1
}
}
},
data: [
{ value: 1048, name: '煤炭' },
{ value: 735, name: '火电' },
{ value: 580, name: '焦化' },
{ value: 484, name: '风电' },
]
}
]
}
myChart.setOption(option)
},
},
})