Vue项目引入Echarts
时间：2023-03-27 22:42:01
HTML
欢迎来到昂研数据，在这里您可以选择全网最专业的技术资源（Vue项目引入Echarts）安装echarts，依赖npminstallecharts制作折线图首先，在main.js中全局导入Echarts，importechartsfrom'echarts'//在vue的原型中引入echartsVue.prototype.$echarts=echarts给需要使用的screen添加dom元素
初始化echarts实例（在mounted生命周期函数中实例化echarts对象，确保页面已经挂载dom元素）drawLine(){//根据准备好的dom,初始化echarts实例letmyChart=this.$echarts.init(document.getElementById('myChart'));//绘制图表myChart.setOption({grid:{x:25,//左边距x2:40,//右边距y:35,//上边距},//图表标题title:{text:'',textStyle:{//标题样式fontSize:14,},},//数据提示框配置可以是：'item'|'axis'tooltip:{trigger:'axis'},xAxis:{type:'category',boundaryGap:false,数据:['08-14','08-15','08-16','08-17','08-18','08-19','08-20','08-21','08-22','08-23','08-24','08-25','08-26','08-27','08-28','08-29'],name:"date"},yAxis:{min:0,max:10,type:'值',name:"Queries"},series:[{type:'line',lineStyle:{color:"#FF6A00",},数据:[1,2,3,4,3,2,2,3,4,3,2,1,3,4,2,10],}]});}上层渲染
