<template>
<div class="business-domian">
<div id="businessDomain"></div>
<div class="dot-class mt-20">
<div class="dot-item">
<span style="color: #e0e7ff">●</span>
<span>总预算</span>
</div>
<div class="dot-item">
<span style="color: #727dff">●</span>
<span>实际使用</span>
</div>
<div class="dot-item">
<span style="color: #5f55e750">●</span>
<span>计划使用</span>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {}
},
mounted() {
this.initEcharts()
},
methods: {
initEcharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('businessDomain'))
// 绘制图表
let option = {
backgroundColor: 'transparent',
grid: [
{
//左侧的柱状图grid
// '100%',
left: '3%',
top: '0',
right: '15%',
bottom: '10'
}
],
xAxis: {
show: true, //是否显示x轴
type: 'value',
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
margin: 0,
color: '#1A185B',
formatter(val) {
return val + '%'
}
}
},
yAxis: [
{
//左侧柱状图的Y轴
gridIndex: 0, //y轴所在的 grid 的索引
splitLine: 'none',
axisTick: 'none',
axisLine: 'none',
axisLabel: {
verticalAlign: 'bottom',
align: 'left',
padding: [0, 0, 15, 10],
color: '#727DFF',
fontSize: '12'
},
data: [
'南京研发中心',
'成都研发中心',
'北京研发中心',
'西安研发中心'
],
inverse: true
},
{
//左侧柱状图的Y轴
gridIndex: 0, //y轴所在的 grid 的索引
splitLine: 'none',
axisTick: 'none',
axisLine: 'none',
data: [78, 58, 72, 67],
inverse: true,
axisLabel: {
show: true,
verticalAlign: 'bottom',
align: 'right',
padding: [0, 10, 15, 0],
color: '#727DFF',
fontSize: '12',
formatter: function (value) {
return value + '%'
},
rich: {
y: {
color: '#befbff',
fontSize: 16
},
x: {
color: '#f6cf42',
fontSize: 16
}
}
}
}
],
series: [
{
name: '南京研发中心',
type: 'bar',
data: [85, , ,],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB30', '#5F55E750'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '南京研发中心',
type: 'bar',
data: [79, , ,],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB', '#5F55E7'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '成都研发中心',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [, 57, ,],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB', '#5F55E7'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '成都研发中心',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [, 80, ,],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB30', '#5F55E750'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '北京研发中心',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [, , 71],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB', '#5F55E7'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '北京研发中心',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [, , 84],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB30', '#5F55E750'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '西安研发中心',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [, , , 65],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB', '#5F55E7'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '西安研发中心',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
data: [, , , 81],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
['#B096FB30', '#5F55E750'].map((color, offset) => ({
color,
offset
}))
)
},
z: 2
},
{
name: '外框',
type: 'bar',
xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
barGap: '-100%',
data: [100, 100, 100, 100],
barWidth: 12,
itemStyle: {
borderRadius: 10,
color: 'rgba(180,203,255,0.20)'
},
z: 0
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
.business-domian {
padding-top: 30px;
.dot-class {
display: flex;
justify-content: space-around;
350px;
margin: 30px auto;
.dot-item {
> span:first-child {
font-size: 20px;
padding-right: 10px;
}
> span:last-child {
font-size: 16px;
}
}
}
}
#businessDomain {
930px;
height: 260px;
}
</style>