简单 ECharts的使用
- 首先呢,我们进行echarts的引入
npm install echarts --save
- 第二步,进行引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
import echarts from "echarts";
- 在body容器里定义一个div的宽高
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
- 模拟数据
options: {
title: {
text: "用户来源"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#E9EEF3"
}
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
boundaryGap: false
}
],
yAxis: [
{
type: "value"
}
]
}
- js内容
async lbjcountShuj() {
var myChart = echarts.init(document.getElementById("main"));
const res = await getCount();
const result = _.merge(res.result, this.options);
myChart.setOption(result);
}
- 通过
myChart.setOption(result);展示