vue3 使用echarts

我不是女神ヾ 2023-01-19 04:36 67阅读 0赞

效果图

在这里插入图片描述

安装Echarts

  1. cnpm install echarts --save

vue页面使用

  1. <template>
  2.   <div id="myChart123" :style="{ width: '1500px', height: '550px'}"></div>
  3. </template>
  5. <script> // 引入echarts import * as echarts from 'echarts' import { onMounted} from "vue"; export default { setup() { onMounted(() => { // 需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getElementById("myChart123")); // 绘制图表 myChart.setOption({ xAxis: { data: ["4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9"] }, yAxis:{ }, series: [ { name: "用户量", type: "line", data: [8, 15, 31, 13, 15, 22, 11] } ] }); window.onresize = function () { // 自适应大小 myChart.resize(); }; }); } } </script>

发表评论

表情：
评论列表 （有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读