济南建设高端网站,设计本官方网站下载,深圳网站优化费用,36氪国外做网站文章目录 方法一template渲染部分js部分方法一实现效果 方法二template部分js or ts部分方法二实现效果 贴个地址~ Apache ECharts官网地址 Apache ECharts示例地址 官网有的时候示例显示不出来#xff0c;属于正常现象#xff0c;多进几次就行 开始使用前#xff0c;记得先… 文章目录 方法一template渲染部分js部分方法一实现效果 方法二template部分js or ts部分方法二实现效果 贴个地址~ Apache ECharts官网地址 Apache ECharts示例地址 官网有的时候示例显示不出来属于正常现象多进几次就行 开始使用前记得先安装好echart
npm install echarts --save以下代码我采用的都是vue文件内全部引入是否按需引入看各自项目要求进行精简。 免责声明bushi 我采用的版本是 “echarts”: “^5.6.0” “vue”: “^3.5.13” “vite”: “^6.0.5”, “vite-plugin-vue-devtools”: “^7.7.0” 方法一
template渲染部分
最简单的柱状图例子跟着官方文档走的 - Apache ECharts - 在项目中引入ECharts 在vue前面写上的显示区域div块的代码下面代码是我自己的尝试内容element-plus也就是包含el-前缀的标签是另外的内容和Echart无关。 templatedivfreedomwxe 第一次调试/divdivel-button typeprimary点击/el-button/divdivspan stylemargin-left: 30px; color: #666el-icon :size20 color#666 styletop: 4pxView //el-icon 666/span/divdiv idmain classbox/div/template重点在idmain的div块这里和下面js代码相互对应
div idmain classbox/divjs部分
下面这块代码和上面的vue直接放到一起 重点在于onMounted这个钩子函数如果直接贴上到js里会发现页面内没有生效。 这里myChart用于获取idmain的dom元素要确保获取到才能显示到上面对应id的div块。 script setup
import * as echarts from echarts;
import { onMounted } from vue;onMounted(() {// 基于准备好的 dom初始化 echarts 实例const myChart echarts.init(document.getElementById(main));// 绘制图表myChart.setOption({title: {text: ECharts 入门示例},tooltip: {},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]});
});
/scriptstyle.box{width: 300px;height: 300px;background-color: rgb(188, 227, 236);}
/style方法一实现效果 方法二
实际在项目中使用发现第一个有局限性它可以加载官方文档里最简单的一些图但是示例那些复杂的却无法正确显示到页面上了在控制台打印说无法找到对应dom元素尽管代码逻辑上无误也可能是我采用了langts的缘故。 然后ai给的思路是在onMounted层内再套一层间隔时间的函数nextTick不行至于时间是多少我试过1、10、100、1000都可以。
template部分
随意加上你要的div块但是id必须与后续jsts里匹配
section classltdiv classleftClassdiv idleft-top-chart/div/div
/sectionjs or ts部分
有些地方可能存在冗余根据各自实际代码进行调整
script langts setup
import {onMounted, reactive ,nextTick,ref} from vue
import * as echarts from echarts;// 左上部分
onMounted(() {setTimeout(() {const lt_chartDom document.getElementById(left-top-chart);if (lt_chartDom) {// 基于准备好的 dom初始化 echarts 实例const ltChart echarts.init(lt_chartDom);console.log(left-top-chartDom: , lt_chartDom)const ltoption {xAxis: {color:[#ffffff,],type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {color:[#ffffff,],type: value},series: [{color:[#41bcf1,],data: [820, 932, 901, 934, 1290, 1330, 1320],type: line,areaStyle: {}}]};ltChart.setOption(ltoption)} else {console.log(未找到left-top-chart的dom元素)}}, 1);
});方法二实现效果 over
理解或代码有误之处欢迎指正~
