//折线图
require("echarts/lib/chart/lines");
initData2() {
// 基于准备好的dom,初始化echarts实例
var myChart2 = echarts.init(document.getElementById("myChart2"));
// 绘制图表
myChart2.setOption({
//提示框
tooltip: {
trigger: "axis",
position: "top",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
//x轴
xAxis: [
{
type: "category",
//坐标轴两边留白策略,即x轴坐标点开始与结束点位置都不在最边缘
boundaryGap: true,
axisLine: {
show: true,
//x轴线样式
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
},
//刻度显示
axisTick: {
show: false
},
//x轴字体设置
axisLabel: {
show: true,
fontSize: 14,
color: "#999"
},
data: [
"01月",
"02月",
"03月",
"04月",
"05月",
"06月",
"07月",
"08月",
"09月",
"10月",
"11月",
"12月"
]
}
],
yAxis: [
{
type: "value",
//y轴字体设置
axisLabel: {
show: true,
color: "#999",
fontSize: 14
},
//刻度显示
axisTick: {
show: false
},
//y轴线设置不显示
axisLine: {
show: false
},
//与x轴平行的线样式
splitLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
series: [
{
type: "line",
//折线平滑
smooth: true,
symbol: "circle",
symbolSize: 6,
//线条样式
lineStyle: {
type: "linear",
color: "#40c4f4",
width: 2,
type: "solid"
},
//折线连接点样式
itemStyle: {
color: "#40c4f4"
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
});
window.addEventListener("resize", function() {
myChart2.resize();
});
}