zqy233的前端学习笔记柱状图
所有实例代码均可在ehcarts的background环境中直接运行
设置不同颜色
series里设置colorBy: "data"，该属性默认是"series"- 设置
color字段
js
option = {
color: ["#E9B22D", "#E9B22D", "#1FC5D3", "#1FC5D3", "#1FC5D3", "#14B296"],
xAxis: {
type: "category",
data: ["城区", "江宁", "江北", "溧水", "高淳", "平均"]
},
yAxis: {
type: "value"
},
series: [
{
data: [
120,
200,
150,
80,
70,
110,
130
],
type: "bar",
colorBy: "data"
}
]
}
option = {
color: ["#E9B22D", "#E9B22D", "#1FC5D3", "#1FC5D3", "#1FC5D3", "#14B296"],
xAxis: {
type: "category",
data: ["城区", "江宁", "江北", "溧水", "高淳", "平均"]
},
yAxis: {
type: "value"
},
series: [
{
data: [
120,
200,
150,
80,
70,
110,
130
],
type: "bar",
colorBy: "data"
}
]
}
设置圆角
js
series: [{
type: "bar", barWidth: 30, itemStyle: {
borderRadius: [5, 5, 0, 0]
}
}]
series: [{
type: "bar", barWidth: 30, itemStyle: {
borderRadius: [5, 5, 0, 0]
}
}]
grid设置四周间距
js
option = {
grid: {
top: "12%",
left: "6%",
right: "5%",
bottom: "12%"
},
xAxis: {
type: "category",
data: ["城区", "江宁", "江北", "溧水", "高淳", "平均"],
},
yAxis: {
type: "value",
},
series: [
{
data: [45, 35, 28, 22, 18, 32],
type: "bar"
}
]
}
option = {
grid: {
top: "12%",
left: "6%",
right: "5%",
bottom: "12%"
},
xAxis: {
type: "category",
data: ["城区", "江宁", "江北", "溧水", "高淳", "平均"],
},
yAxis: {
type: "value",
},
series: [
{
data: [45, 35, 28, 22, 18, 32],
type: "bar"
}
]
}
双向柱状图
js
<template>
<base-chart-layout :title="title">
<!-- <div class="title">
<div class="text">全地区：</div>
<div class="width">
<p class="green">{{ data.title.shdl }}</p>
<p class="name">全社会用电量累计</p>
</div>
<div class="line"></div>
<div class="width">
<p class="a">{{ data.title.shtb }}%</p>
<p class="name">全社会用电量同比</p>
</div>
<div class="line"></div>
<div class="width">
<p class="b">{{ data.title.gydl }}</p>
<p class="name">工业用电量累计</p>
</div>
<div class="line"></div>
<div class="width">
<p class="c">{{ data.title.gytb }}</p>
<p class="name">工业用电量同比</p>
</div>
</div> -->
<!-- <div class="header">单位：万千瓦</div>
<div class="header1">单位：%</div> -->
<div class="chart">
<v-chart :option="options" autoresize></v-chart>
</div>
</base-chart-layout>
</template>
<script>
import BaseChartLayout from "@layout/base-chart-layout";
import { XAxisOption, YAxisOption } from "@common/echarts-common-option";
import { mapState } from "vuex";
import { getBdxlData } from "@api/xz/02-dwfm";
export default {
name: "dwyx-ydfhqx",
components: { BaseChartLayout },
data() {
return {
data: {},
zrMax: 0,
jrMax: 0,
};
},
computed: {
...mapState(["area"]),
title() {
return `近五年线路规模`;
},
options() {
let textColor = "#fff";
let lineColor = "rgba(255,255,255,0.2)";
let options = {
legend: {
show: true,
right: "center",
itemGap: 200,
itemWidth: 14,
itemHeight: 14,
top: 30,
textStyle: {
color: "white",
},
},
grid: [
{
show: false,
left: "5%",
right: "0",
top: 50,
bottom: "5%",
containLabel: true,
width: "43%",
},
{
show: false,
right: "6.9%",
top: 50,
bottom: "5%",
containLabel: true,
width: "43%",
},
],
xAxis: [
{
type: "value",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: "bottom",
axisLabel: {
show: true,
color: textColor,
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: "bottom",
axisLabel: {
show: true,
color: textColor,
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false,
lineStyle: {
color: lineColor,
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: [],
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: true,
lineStyle: {
color: lineColor,
},
},
axisTick: {
show: false,
},
axisLabel: {
margin: 20,
show: true,
color: "#FFF",
},
data: [],
},
],
series: [
{
name: "线路条数",
type: "bar",
barWidth: 30,
showBackground: true,
label: {
show: true,
position: "left",
color: "#66DEE3",
},
itemStyle: {
borderRadius: [10, 0, 0, 10],
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#0CA5AD", // 0% 处的颜色
},
{
offset: 1,
color: "#25DCE4", // 100% 处的颜色
},
],
},
},
data: [],
},
{
name: "线路长度",
type: "bar",
showBackground: true,
stack: "2",
barWidth: 30,
xAxisIndex: 1,
yAxisIndex: 1,
label: {
show: true,
position: "right",
color: "#9ECCEF",
},
itemStyle: {
borderRadius: [0, 10, 10, 0],
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#58A8E2", // 0% 处的颜色
},
{
offset: 1,
color: "#156AAB", // 100% 处的颜色
},
],
},
},
data: [],
},
],
};
if (JSON.stringify(this.data) !== "{}") {
options.yAxis[1].data = this.data.xaxis;
console.log(options.yAxis[1].data);
options.series[0].data = this.data.xlts;
options.series[1].data = this.data.xlcd;
}
return options;
},
},
watch: {
area() {
this.loadData();
},
},
mounted() {
this.loadData();
},
methods: {
loadData() {
this.data = {};
getBdxlData(this.area).then((data) => {
if (data) {
this.data = data;
}
});
},
},
};
</script>
<style scoped lang="scss">
// .title {
// height: 99px;
// background-color: #0e253c;
// display: flex;
// align-items: center;
// padding: 20px 40px;
// margin: 20px 0px;
// .text {
// width: 12%;
// font-size: 30px;
// line-height: 36px;
// color: #dfeef3;
// }
// .width {
// width: 20%;
// }
// .green {
// font-size: 32px;
// line-height: 36px;
// color: #34e2ab;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .a {
// font-size: 32px;
// line-height: 36px;
// color: #02fff0;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .b {
// font-size: 32px;
// line-height: 36px;
// color: #0ea3fd;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .c {
// font-size: 32px;
// line-height: 36px;
// color: #f1b835;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .name {
// font-size: 24px;
// line-height: 36px;
// color: #72828f;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .line {
// margin: 0 20px;
// width: 1px;
// height: 100%;
// background-color: #0e253d;
// }
// }
.header {
width: 120px;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #fff;
position: absolute;
top: 80px;
left: 60px;
}
.header1 {
width: 100px;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #fff;
position: absolute;
top: 80px;
right: 30px;
}
.chart {
width: 100%;
height: calc(100% - 0px);
}
</style>
<template>
<base-chart-layout :title="title">
<!-- <div class="title">
<div class="text">全地区：</div>
<div class="width">
<p class="green">{{ data.title.shdl }}</p>
<p class="name">全社会用电量累计</p>
</div>
<div class="line"></div>
<div class="width">
<p class="a">{{ data.title.shtb }}%</p>
<p class="name">全社会用电量同比</p>
</div>
<div class="line"></div>
<div class="width">
<p class="b">{{ data.title.gydl }}</p>
<p class="name">工业用电量累计</p>
</div>
<div class="line"></div>
<div class="width">
<p class="c">{{ data.title.gytb }}</p>
<p class="name">工业用电量同比</p>
</div>
</div> -->
<!-- <div class="header">单位：万千瓦</div>
<div class="header1">单位：%</div> -->
<div class="chart">
<v-chart :option="options" autoresize></v-chart>
</div>
</base-chart-layout>
</template>
<script>
import BaseChartLayout from "@layout/base-chart-layout";
import { XAxisOption, YAxisOption } from "@common/echarts-common-option";
import { mapState } from "vuex";
import { getBdxlData } from "@api/xz/02-dwfm";
export default {
name: "dwyx-ydfhqx",
components: { BaseChartLayout },
data() {
return {
data: {},
zrMax: 0,
jrMax: 0,
};
},
computed: {
...mapState(["area"]),
title() {
return `近五年线路规模`;
},
options() {
let textColor = "#fff";
let lineColor = "rgba(255,255,255,0.2)";
let options = {
legend: {
show: true,
right: "center",
itemGap: 200,
itemWidth: 14,
itemHeight: 14,
top: 30,
textStyle: {
color: "white",
},
},
grid: [
{
show: false,
left: "5%",
right: "0",
top: 50,
bottom: "5%",
containLabel: true,
width: "43%",
},
{
show: false,
right: "6.9%",
top: 50,
bottom: "5%",
containLabel: true,
width: "43%",
},
],
xAxis: [
{
type: "value",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: "bottom",
axisLabel: {
show: true,
color: textColor,
},
splitLine: {
show: false,
},
},
{
gridIndex: 1,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
position: "bottom",
axisLabel: {
show: true,
color: textColor,
},
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false,
lineStyle: {
color: lineColor,
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
data: [],
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: true,
lineStyle: {
color: lineColor,
},
},
axisTick: {
show: false,
},
axisLabel: {
margin: 20,
show: true,
color: "#FFF",
},
data: [],
},
],
series: [
{
name: "线路条数",
type: "bar",
barWidth: 30,
showBackground: true,
label: {
show: true,
position: "left",
color: "#66DEE3",
},
itemStyle: {
borderRadius: [10, 0, 0, 10],
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#0CA5AD", // 0% 处的颜色
},
{
offset: 1,
color: "#25DCE4", // 100% 处的颜色
},
],
},
},
data: [],
},
{
name: "线路长度",
type: "bar",
showBackground: true,
stack: "2",
barWidth: 30,
xAxisIndex: 1,
yAxisIndex: 1,
label: {
show: true,
position: "right",
color: "#9ECCEF",
},
itemStyle: {
borderRadius: [0, 10, 10, 0],
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#58A8E2", // 0% 处的颜色
},
{
offset: 1,
color: "#156AAB", // 100% 处的颜色
},
],
},
},
data: [],
},
],
};
if (JSON.stringify(this.data) !== "{}") {
options.yAxis[1].data = this.data.xaxis;
console.log(options.yAxis[1].data);
options.series[0].data = this.data.xlts;
options.series[1].data = this.data.xlcd;
}
return options;
},
},
watch: {
area() {
this.loadData();
},
},
mounted() {
this.loadData();
},
methods: {
loadData() {
this.data = {};
getBdxlData(this.area).then((data) => {
if (data) {
this.data = data;
}
});
},
},
};
</script>
<style scoped lang="scss">
// .title {
// height: 99px;
// background-color: #0e253c;
// display: flex;
// align-items: center;
// padding: 20px 40px;
// margin: 20px 0px;
// .text {
// width: 12%;
// font-size: 30px;
// line-height: 36px;
// color: #dfeef3;
// }
// .width {
// width: 20%;
// }
// .green {
// font-size: 32px;
// line-height: 36px;
// color: #34e2ab;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .a {
// font-size: 32px;
// line-height: 36px;
// color: #02fff0;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .b {
// font-size: 32px;
// line-height: 36px;
// color: #0ea3fd;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .c {
// font-size: 32px;
// line-height: 36px;
// color: #f1b835;
// font-weight: bold;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .name {
// font-size: 24px;
// line-height: 36px;
// color: #72828f;
// font-family: "Microsoft Ya Hei";
// text-align: center;
// }
// .line {
// margin: 0 20px;
// width: 1px;
// height: 100%;
// background-color: #0e253d;
// }
// }
.header {
width: 120px;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #fff;
position: absolute;
top: 80px;
left: 60px;
}
.header1 {
width: 100px;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #fff;
position: absolute;
top: 80px;
right: 30px;
}
.chart {
width: 100%;
height: calc(100% - 0px);
}
</style>
示例1
js
option = {
title: {
text: '告警次数统计图'
},
color: ['#3BA1FF'],
xAxis: {
type: 'category',
data: [
'12.01',
'12.02',
'12.03',
'12.04',
'12.05',
'12.06',
'12.07',
'12.08',
'12.09',
'12.11',
'12.12',
'12.13',
'12.14',
'12.15',
'12.166',
'12.17',
'12.18',
'12.19',
'12.20',
'12.21',
'12.22',
'12.23',
'12.24',
'12.25',
'12.26',
'12.27',
'12.28',
'12.29',
'12.30',
'12.31'
]
},
yAxis: {
type: 'value'
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 3, 2, 1],
type: 'bar',
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option = {
title: {
text: '告警次数统计图'
},
color: ['#3BA1FF'],
xAxis: {
type: 'category',
data: [
'12.01',
'12.02',
'12.03',
'12.04',
'12.05',
'12.06',
'12.07',
'12.08',
'12.09',
'12.11',
'12.12',
'12.13',
'12.14',
'12.15',
'12.166',
'12.17',
'12.18',
'12.19',
'12.20',
'12.21',
'12.22',
'12.23',
'12.24',
'12.25',
'12.26',
'12.27',
'12.28',
'12.29',
'12.30',
'12.31'
]
},
yAxis: {
type: 'value'
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 3, 2, 1],
type: 'bar',
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};