前言： ? ? ? ? vue3.0中的方法和echarts升级到5以后的方法都有改变。 vue3.0官方入口echart5官方入口 目录:
实现效果：
方法一：使用id来绑定页面dom，引入echart
操作步骤：
1、引入echart
2、页面上定义dom
3、具体方法
4、样式
方法二：使用ref来绑定页面dom，引入echart
操作步骤：
1、引入echart
2、页面上定义dom
3、具体方法
4、样式
实现效果： 方法一：使用id来绑定页面dom，引入echart 操作步骤： 1、引入echart cnpm i --save echarts import * as echarts from 'echarts'; 2、页面上定义dom <template> <div id="echartLine" class="echartDiv"> 折线图 </div> </template> 3、具体方法 import { onMounted } from 'vue'; export default { setup(){ const echartInit = () =>{ var myChart = echarts.init(document.getElementById('echartLine')); // 指定图表的配置项和数据 var option = { tooltip: {}, legend: { data:['会员登录次数'] }, xAxis: { data: state.xAxisData }, yAxis: {}, series: [{ name: '会员登录次数', type: 'bar', data: state.yAxisData }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //挂载 onMounted(()=>{ echartInit() }) return { echartInit }; } } 4、样式 <style lang='scss' scoped> .echartDiv{ width: 100%; height: 400px; } </style> 方法二：使用ref来绑定页面dom，引入echart 操作步骤： 1、引入echart cnpm i --save echarts import * as echarts from 'echarts'; 2、页面上定义dom <template> <div id="echartLine" class="echartDiv"> 折线图 </div> </template> 3、具体方法, 注意需要引入ref,? toRefs <script> import * as echarts from 'echarts'; import { onMounted,toRefs, ref,reactive } from 'vue'; export default { setup(){ let state = reactive({ xAxisData:['浩星','妍仔','哆啦a梦','李强','王颖','老王'], yAxisData:[4,22,1,11,23,11], echart: ref(), }) let echart = ref(null); const echartInit = () =>{; var myChart = echarts.init(state.echart); // 指定图表的配置项和数据 var option = { tooltip: {}, legend: { data:['会员登录次数'] }, xAxis: { data: state.xAxisData }, yAxis: {}, series: [{ name: '会员登录次数', type: 'bar', data: state.yAxisData }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //挂载 onMounted(()=>{ echartInit() }) return { ...toRefs(state), echartInit }; } } </script> 4、样式 <style lang='scss' scoped> .echartDiv{ width: 100%; height: 400px; } </style>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #前言
