Echars官网 https://echarts.apache.org/zh/index.html
一、npm安装echarts
npm install echarts --save
二、使用echarts
1. 编辑Vue页面
import * as echarts from "echarts";
2.增加Div标签
<divid="questionStatus"class="questionStatus"></div>
3.渲染数据
exportdefault { name: "index", components: { VHeader, VFooter, }, setup() { constrouter=useRouter(); constdata=reactive({ number: 0, //首页show: true, active: 0, questions: { xAxis: { type: "category", data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", ], }, yAxis: { type: "value", }, series: [ { data: [0, 10, 30, 20, 30, 30, 70, 20, 5, 65, 40, 30], type: "line", smooth: true, }, ], }, }); constmethodsMap= { goListPage(e) { router.push({ path: e }); }, drawChart(id) { letmyEchart=echarts.init(document.getElementById(id)); myEchart.setOption(data.questions); window.onresize=function () { myEchart.resize(); }; }, }; onMounted(async () => { methodsMap.drawChart("questionStatus"); }); return { toRefs(data), methodsMap, }; }, };
4.展示效果