<template>
<div class="content">
<div ref="myChart" class="classChart"></div>
</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import baseFunc from "@/serves/baseFunc";
export default {
props: ["title", "data"],
mounted() {
this.Myecharts();
},
methods: {
Myecharts() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.myChart);
// 绘制图表
myChart.setOption({
title: {
text: this.title,
textStyle: {
//标题内容的样式
color: "#999",
fontWeight: "lighter", //可选normal(正常),bold(加粗),bolder(加粗),lighter(变细),100|200|300|400|500...
fontSize: 16 //主题文字字体大小,默认为18px
},
left: "center"
},
tooltip: {},
xAxis: {
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisLabel: {
interval: 4,
textStyle: {
color: "#999"
}
},
axisTick: {
//x轴刻度线
show: false
},
axisLine: {
//x轴
show: false
}
},
yAxis: {
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ["#eee"],
width: 1,
type: "solid"
}
},
axisTick: {
//y轴刻度线
show: false
},
axisLine: {
//y轴
show: false
},
axisLabel: {
color: "#555",
fontSize: 14,
textStyle: {
color: "#999"
},
formatter: function(value, index) {
var value;
if (value >= 1000) {
value = value / 1000 + "k";
} else if (value < 1000) {
value = value;
}
return value;
}
}
},
series: [
{
type: "line",
color: "#F21156",
areaStyle: {
color: "rgba(242,17,86,0.1)"
},
itemStyle: {
normal: {
color: "#F21156",
borderColor: "#fff" //拐点边框颜色
}
},
symbol: "circle",
symbolSize:5,
data: [
25000,
10000,
16000,
10000,
10000,
15000,
10000,
16000,
10000,
10000,
20000,
20000
]
}
]
});
}
}
};
</script>
<style lang='less' scoped>
.content {
padding-top: 0.5rem;
}
.classChart {
width: 100%;
height: 5rem;
}
h4 {
font-size: 0.24rem;
color: #999;
}
</style>
Myecharts() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.myChart);
// 绘制图表
myChart.setOption({
title: {
text: this.title,
textStyle: {
//标题内容的样式
color: "#999", //京东红
fontWeight: "lighter", //可选normal(正常),bold(加粗),bolder(加粗),lighter(变细),100|200|300|400|500...
fontSize: 16 //主题文字字体大小,默认为18px
},
left: "center"
},
tooltip: {},
xAxis: {
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
axisLabel: {
interval: 4,
textStyle: {
color: "#999"
}
},
axisTick: {
//x轴刻度线
show: false
},
axisLine: {
//x轴
show: false
}
},
yAxis: {
//设置网格线颜色
splitLine: {
show: true,
lineStyle: {
color: ["#eee"],
width: 1,
type: "solid"
}
},
axisTick: {
//y轴刻度线
show: false
},
axisLine: {
//y轴
show: false
},
axisLabel: {
color: "#555",
fontSize: 14,
textStyle: {
color: "#999"
},
formatter: function(value, index) {
var value;
if (value >= 1000) {
value = value / 1000 + "k";
} else if (value < 1000) {
value = value;
}
return value;
}
}
},
series: [
{
type: "line",
color: "#F21156",
areaStyle: {
color: "rgba(242,17,86,0.1)"
},
itemStyle: {
normal: {
color: "#F21156",
borderColor: "#fff" //拐点边框颜色
}
},
symbol: "circle",
symbolSize:5,
data: [
25000,
10000,
16000,
10000,
10000,
15000,
10000,
16000,
10000,
10000,
20000,
20000
]
}
]
});
}