在前端做可视化项目中，不得不提到Echarts，一个专业的可视化插件
echarts官网链接
使用Echarts
- 引入包
npm install echarts --save
也可以使用yarn
- 首先，我们定义一下template
<template> <div class="echarts-box"> <div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div> </div> </template>
- 其次，在文件中导入Echarts
import * as echarts from "echarts";
- 然后，在script中进行使用
export default { name: "echartsBox", setup() { /// 声明定义一下echart let echart = echarts; onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // 基础配置一下Echarts function initChart() { let chart = echart.init(document.getElementById("myEcharts"), "dark"); // 把配置和数据放这里 chart.setOption({ xAxis: { type: "category", data: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ] }, tooltip: { trigger: "axis" }, yAxis: { type: "value" }, series: [ { data: [ 820, 932, 901, 934, 1290, 1330, 1320, 801, 102, 230, 4321, 4129 ], type: "line", smooth: true } ] }); window.onresize = function() { //自适应大小 chart.resize(); }; } return { initChart }; } }; </script>
效果图:
总结一下
在正式开发中，我们可能多处使用到Echarts，所以大家可以写一个EchartsCommon，把height、width和setOption定义为动态接收props，这样就方便调用啦！！
