安装方式从 npm 获取
npm install echarts
使用的页面js部分引入:
import * as echarts from "echarts"; // 图标引入
html:需要带id标签的div
<div class="bottom">
<div id="main1"></div>
</div>
css:需要设定长宽
#main1
{
width: 49%;
// height: 70vh;
height: 40vh;
background: #fff;
}
js :
mounted() {
// 渲染图表
this.$nextTick(() => {
this.drawChart1();
});
},
drawChart1() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
var chartDom = document.getElementById("main1");
var myChart = echarts.init(chartDom);
myChart.clear(); // 清空图表,重新渲染图表
// 指定图表的配置项和数据
let option = {
grid: {
top: "18%",
left: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
right: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
bottom: "7%",
},
title: {
text: "7日识别总次数",
},
tooltip: {},
legend: {
data: ["人数"],
},
// 日期
xAxis: {
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
data: this.Days7,
},
yAxis: {},
series: [
{
name: "次数",
type: "bar",
// data: [5, 20, 36, 10, 10, 20],
data: this.Days7Data,
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
就是直接去复制官网中你要的那个的完整代码,第一行的引入上面已经写了
补充:
要想获取数据的时候再重新渲染表格只需加一行:
myChart.clear(); // 清空图表,重新渲染图表