柱状图基本配置
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
markPoint: {
data: [{ type: 'max' },{ type: 'min'}]
},
markLine: {
data: [{ type: 'average' }]
}
option = {
xAxis: [
{
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
}
],
yAxis: [
{
type: 'value',
name: '高度',
position: 'right',
},
{
type: 'value',
name: '温度',
position: 'left',
alignTicks: true,
}
],
series: [
{
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 5.6
]
},
{
type: 'line',
yAxisIndex:1,
data: [2.0, 2.2, 3.3, 4.5, 1.3]
}
]
};
toolbox: {
show: true,
feature: {
dataView: { readOnly: true },
magicType: { type: ["line", "bar"] },
saveAsImage: {},
},
},
效果1：
<template>
<div id="chartBar" style="width: 700px; height: 300px"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
chartBar: null,
category: [
"潼南",
"巫山",
"巫溪",
"武隆",
"秀山",
"酉阳",
"云阳",
"忠县",
"川东",
"检修",
],
lineData: [
50415,
36097,
39867,
44715,
48444,
50415,
50061,
32677,
49521,
32808,
],
barData: [
21500,
8500,
9900,
12500,
14000,
21500,
23200,
24450,
25250,
7500,
],
rateData: [],
};
},
methods: {
setData() {
for (let i = 0; i < this.barData.length; i++) {
let rate = this.barData[i] / this.lineData[i];
this.rateData.push(rate.toFixed(2));
}
},
drawChart() {
this.chartBar = echarts.init(document.getElementById("chartBar"));
this.chartBar.setOption({
title: {
text: "",
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
borderColor: "rgba(255,255,255,0.1)",
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC",
},
},
textStyle: {
color: "white",
},
},
legend: {
data: ["已完成", "计划完成", "完成率"],
textStyle: {
color: "#B4B4B4",
},
top: "0%",
},
grid: {
x: "8%",
width: "88%",
y: "4%",
},
xAxis: {
data: this.category,
axisLine: {
lineStyle: {
color: "#B4B4B4",
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4",
},
},
axisLabel: {
formatter: "{value} ",
},
},
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4",
},
},
axisLabel: {
formatter: "{value} ",
},
},
],
series: [
{
name: "完成率",
type: "line",
smooth: true,
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 8,
yAxisIndex: 1,
itemStyle: {
normal: {
color: "#F02FC2",
},
},
data: this.rateData,
},
{
name: "已完成",
type: "bar",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#956FD4" },
{ offset: 1, color: "#3EACE5" },
]),
},
},
data: this.barData,
},
{
name: "计划完成",
type: "bar",
barGap: "-100%",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(156,107,211,0.8)" },
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
{ offset: 1, color: "rgba(156,107,211,0.2)" },
]),
},
},
z: -12,
data: this.lineData,
},
],
});
},
},
mounted: function () {
this.setData();
this.drawChart();
},
updated: function () {
this.drawChart();
},
};
</script>
<style scoped>
#chartBar {
background-color: rgba(19, 25, 47, 0.6);
}
</style>效果2：
<template>
<div id="chartInstance" style="width: 700px; height: 300px"></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
// colorArr: [
// ["#0BA82C", "#4FF778"],
// ["#2E72BF", "#23E5E5"],
// ["#5052EE", "#AB6EE5"]
// ],
// 样式二
colorArr: [
["#b8e994", "#079992"],
["#82ccdd", "#0a3d62"],
["#f8c291", "#b71540"]
],
// 图表的实例对象
chartInstance: null,
provinceInfo: [
"上海",
"北京",
"广州",
"深圳",
"四川",
"重庆",
"河北",
"河南",
"山东",
"山西",
"云南",
"海南",
"甘肃",
"湖北",
"湖南"
],
valueArr: [
100,
200,
300,
400,
123,
234,
345,
456,
124,
241,
134,
241,
123,
111,
245
],
// 柱形图 区域缩放起点值
startValue: 0,
// 柱形图结 区域缩放终点值
endValue: 9,
// 定时器
timerId: null
};
},
mounted() {
this.drawChart();
this.updateChart();
this.startInterval();
},
destroyed() {
clearInterval(this.timerId);
},
methods: {
drawChart() {
this.chartInstance = echarts.init(
document.getElementById("chartInstance")
);
this.chartInstance.setOption({
title: {
text: "▎地区销售排行",
left: 20,
top: 20
},
grid: {
top: "40%",
left: "5%",
right: "5%",
bottom: "5%",
// 把x轴和y轴纳入 grid
containLabel: true
},
tooltip: {
show: true
},
xAxis: {
type: "category"
},
yAxis: {
value: "value"
},
series: [
{
type: "bar",
label: {
show: true,
position: "top",
color: "white",
rotate: 30
},
barWidth: 30,
itemStyle: {
barBorderRadius: [10, 10, 0, 0] //[左上角，右上角，左小角，右下角]
}
}
]
});
// 鼠标经过关闭 动画效果
this.chartInstance.on("mouseover", () => {
clearInterval(this.timerId);
});
// 鼠标离开 开启动画效果
this.chartInstance.on("mouseout", () => {
this.startInterval();
});
},
// 更新图表配置项
updateChart() {
// const colorArr = [
// ['#b8e994', '#079992'],
// ['#82ccdd', '#0a3d62'],
// ['#f8c291', '#b71540'],
// ]
const dataOption = {
xAxis: {
data: this.provinceInfo
},
dataZoom: {
// 区域缩放组件
show: false,
startValue: this.startValue,
endValue: this.endValue
},
series: [
{
data: this.valueArr,
itemStyle: {
color: arg => {
let targetColorArr = null;
if (arg.value > 300) {
targetColorArr = this.colorArr[0];
} else if (arg.value > 200) {
targetColorArr = this.colorArr[1];
} else {
targetColorArr = this.colorArr[2];
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 0%
{ offset: 0, color: targetColorArr[0] },
// 100%
{ offset: 1, color: targetColorArr[1] }
]);
}
}
}
]
};
this.chartInstance.setOption(dataOption);
},
// 改变柱形图 区域缩放起始与终点值的函数
startInterval() {
// 如果存在则关闭
this.timerId && clearInterval(this.timerId);
this.timerId = setInterval(() => {
this.startValue++;
this.endValue++;
if (this.endValue > this.provinceInfo.length - 1) {
this.startValue = 0;
this.endValue = 9;
}
this.updateChart();
}, 2000);
}
}
};
</script>
<style scoped>
#chartInstance {
background-color: rgba(19, 25, 47, 0.6);
}
</style>效果3：
chart.vue:
<template>
<!-- 每一个图表都要设置height高度，如下 -->
<Echart :options="options" height="4.4rem"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
// backgroundColor: "rgba(19, 25, 47, 0.6)",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "15%",
right: "3%",
left: "5%",
bottom: "12%",
},
xAxis: [
{
type: "category",
// data: ['工作票', '操作票', '抢修', '用电调查', '设备巡视', '现场勘查', '到岗到位'],
data: newData.xData,
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
axisLabel: {
margin: 10,
color: "#e2e9ff",
textStyle: {
fontSize: 14,
},
},
},
],
yAxis: [
{
axisLabel: {
formatter: "{value}",
color: "#e2e9ff",
},
axisLine: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
},
],
series: [
{
type: "bar",
// data: [300, 450, 770, 203, 255, 188, 156],
data: newData.yData,
barWidth: "20rem",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,244,255,1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,77,167,1)", // 100% 处的颜色
},
],
false
),
barBorderRadius: [30, 30, 30, 30],
shadowColor: "rgba(0,160,221,1)",
shadowBlur: 4,
},
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: "rgba(0,160,221,0.1)",
borderRadius: 200,
position: ["-8", "-60"],
distance: 1,
formatter: [" {d|●}", " {a|{c}} \n", " {b|}"].join(
","
),
rich: {
d: {
color: "#3CDDCF",
},
a: {
color: "#fff",
align: "center",
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: "#234e6c",
align: "left",
},
},
},
},
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>index.vue:
<template>
<Chart :cdata="cdata" />
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: [],
yData: [],
},
};
},
components: {
Chart,
},
mounted() {
this.setData();
},
methods: {
// 根据自己的业务情况修改
setData() {
this.cdata.xData = [
"工作票",
"操作票",
"抢修",
"用电调查",
"设备巡视",
"现场勘查",
"到岗到位",
];
this.cdata.yData = [300, 450, 770, 203, 255, 188, 156];
},
},
};
</script>
效果4：
chart.vue:
<template>
<!-- 每一个图表都要设置height高度，如下 -->
<Echart :options="options" height="4.5rem"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
},
grid: {
borderWidth: 0,
top: 50,
bottom: 45,
right: 15,
textStyle: {
color: "#fff",
},
},
legend: {
x: "70%",
top: "1%",
textStyle: {
color: "#90979c",
},
data: ["女", "男", "总数"],
},
calculable: true,
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#90979c",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
},
data: newData.xData,
},
],
yAxis: [
{
type: "value",
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#90979c",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
splitArea: {
show: false,
},
},
],
dataZoom: [
{
show: false,
height: 30,
xAxisIndex: [0],
bottom: 30,
start: 10,
end: 80,
handleIcon:
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
handleSize: "110%",
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff",
},
borderColor: "#90979c",
},
{
type: "inside",
show: true,
height: 15,
start: 1,
end: 35,
},
],
series: [
{
name: "女",
type: "bar",
stack: "总量",
barMaxWidth: 35,
barGap: "10%",
itemStyle: {
normal: {
color: "rgba(255,144,128,1)",
label: {
show: true,
textStyle: {
color: "#fff",
},
position: "inside",
formatter: function (p) {
return p.value > 0 ? p.value : "";
},
},
},
},
data: newData.girls,
},
{
name: "男",
type: "bar",
stack: "总量",
itemStyle: {
normal: {
color: "rgba(0,191,183,1)",
barBorderRadius: 0,
label: {
show: true,
position: "inside",
formatter: function (p) {
return p.value > 0 ? p.value : "";
},
},
},
},
data: newData.boys,
},
{
name: "总数",
type: "line",
symbolSize: 10,
symbol: "circle",
itemStyle: {
normal: {
color: "rgba(252,230,48,1)",
barBorderRadius: 0,
label: {
show: true,
position: "top",
formatter: function (p) {
return p.value > 0 ? p.value : "";
},
},
},
},
data: newData.total,
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>index.vue:
<template>
<Chart :cdata="cdata" />
</template>
<script>
import Chart from "./chart.vue";
export default {
data() {
return {
cdata: {
xData: [],
girls: [],
boys: [],
total: [],
},
};
},
components: {
Chart,
},
mounted() {
this.setData();
},
methods: {
// 根据自己的业务情况修改
setData() {
this.cdata.xData = (function () {
var data = [];
for (var i = 1; i < 13; i++) {
data.push(i + "月份");
}
return data;
})();
this.cdata.girls = [
709,
1917,
2455,
2610,
1719,
1433,
1544,
3285,
5208,
3372,
2484,
4078,
];
this.cdata.boys = [
327,
1776,
507,
1200,
800,
482,
204,
1390,
1001,
951,
381,
220,
];
this.cdata.total = [
1036,
3693,
2962,
3810,
2519,
1915,
1748,
4675,
6209,
4323,
2865,
4298,
];
},
},
};
</script>
效果5
options2() {
let xData = ["桃树", "柑橘", "梨树", "枇杷", "芒果"];
let yData = [2342, 1230, 425, 222, 434];
return {
backgroundColor: "rgba(255,255,255,0)",
grid: {
top: "25%",
left: "-5%",
bottom: "5%",
right: "5%",
containLabel: true,
},
tooltip: {
backgroundColor: "rgba(255,255,255,0.1)",
borderColor: "rgba(255,255,255,0.1)",
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC",
},
},
textStyle: {
color: "white",
},
},
animation: false,
xAxis: [
{
type: "category",
data: xData,
axisTick: {
alignWithLabel: true,
},
nameTextStyle: {
color: "#82b0ec",
},
axisLine: {
show: false,
lineStyle: {
color: "#82b0ec",
},
},
axisLabel: {
textStyle: {
color: "#fff",
},
margin: 30,
},
},
],
yAxis: [
{
show: false,
type: "value",
axisLabel: {
textStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
color: "#0c2c5a",
},
},
axisLine: {
show: false,
},
},
],
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [40, 10],
symbolOffset: [0, -6],
symbolPosition: "end",
z: 12,
// "barWidth": "0",
label: {
normal: {
show: true,
position: "top",
// "formatter": "{c}%"
fontSize: 15,
fontWeight: "bold",
color: "#34DCFF",
},
},
color: "#2DB1EF",
data: yData,
},
{
name: "",
type: "pictorialBar",
symbolSize: [40, 10],
symbolOffset: [0, 7],
// "barWidth": "20",
z: 12,
color: "#2DB1EF",
data: yData,
},
{
name: "",
type: "pictorialBar",
symbolSize: [50, 15],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#2EA9E5",
borderType: "solid",
borderWidth: 1,
},
},
data: yData,
},
{
name: "",
type: "pictorialBar",
symbolSize: [70, 20],
symbolOffset: [0, 18],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#19465D",
borderType: "solid",
borderWidth: 2,
},
},
data: yData,
},
{
type: "bar",
//silent: true,
barWidth: "40",
barGap: "10%", // Make series be overlap
barCateGoryGap: "10%",
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: "#38B2E6",
},
{
offset: 1,
color: "#0B3147",
},
]),
opacity: 0.8,
},
},
data: yData,
},
],
};
}
2477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
