forked from integrated_whb/integrated_whb_vue
139 lines
3.2 KiB
JavaScript
139 lines
3.2 KiB
JavaScript
import * as echarts from "echarts";
|
||
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
|
||
let myChart2;
|
||
function echarts2(id, month, accumulated, currentMonth) {
|
||
myChart2 = echarts.init(document.querySelector(`#${id}`));
|
||
const option = {
|
||
backgroundColor: "",
|
||
tooltip: {},
|
||
grid: {
|
||
top: "5%",
|
||
left: "1%",
|
||
right: "1%",
|
||
bottom: "0%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
icon: "circle",
|
||
data: ["累计趋势", "当月趋势"],
|
||
textStyle: {
|
||
color: "#999999",
|
||
borderColor: "#fff",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
// 坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#f9f9f9",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// 坐标轴刻度标签的相关设置
|
||
color: "#d1e6eb",
|
||
margin: 15,
|
||
interval: 0,
|
||
rotate: 30,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
data: month,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
// max: 140,
|
||
splitNumber: 7,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#0a3256",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
margin: 20,
|
||
color: "#d1e6eb",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "累计趋势",
|
||
type: "line",
|
||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||
showAllSymbol: true,
|
||
symbolSize: 8,
|
||
lineStyle: {
|
||
color: "#28ffb3", // 线条颜色
|
||
},
|
||
itemStyle: {
|
||
color: "#28ffb3",
|
||
borderColor: "#fff",
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
},
|
||
areaStyle: {
|
||
// 区域填充样式
|
||
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0,154,120,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,0,0, 0)",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||
shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
data: accumulated,
|
||
},
|
||
{
|
||
name: "当月趋势",
|
||
type: "bar",
|
||
barWidth: 20,
|
||
tooltip: {
|
||
show: true,
|
||
},
|
||
itemStyle: {
|
||
color: "#1492FF",
|
||
},
|
||
data: currentMonth,
|
||
},
|
||
],
|
||
};
|
||
myChart2.setOption(option);
|
||
}
|
||
tryOnMounted(() => {
|
||
window.onresize = function () {
|
||
myChart2 && myChart2.resize();
|
||
};
|
||
});
|
||
tryOnUnmounted(() => {
|
||
myChart2 = null;
|
||
});
|
||
export default echarts2;
|