forked from integrated_whb/integrated_whb_vue
141 lines
3.3 KiB
JavaScript
141 lines
3.3 KiB
JavaScript
|
import * as echarts from "echarts";
|
|||
|
|
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
|
|||
|
|
let myChart2;
|
|||
|
|
function echarts2(id) {
|
|||
|
|
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: {
|
|||
|
|
// 坐标轴刻度标签的相关设置
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#d1e6eb",
|
|||
|
|
margin: 15,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: "value",
|
|||
|
|
min: 0,
|
|||
|
|
// max: 140,
|
|||
|
|
splitNumber: 7,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#0a3256",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
margin: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
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: [393, 438, 485, 631, 689, 824, 987],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "本月推荐",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: 20,
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#1492FF",
|
|||
|
|
},
|
|||
|
|
data: [200, 382, 102, 267, 186, 315, 316],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart2.setOption(option);
|
|||
|
|
}
|
|||
|
|
tryOnMounted(() => {
|
|||
|
|
window.onresize = function () {
|
|||
|
|
myChart2 && myChart2.resize();
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
tryOnUnmounted(() => {
|
|||
|
|
myChart2 = null;
|
|||
|
|
});
|
|||
|
|
export default echarts2;
|