在vue中使用Echarts[官方5分钟上手ECharts] |
您所在的位置：网站首页 › vue用echarts关系图 › 在vue中使用Echarts[官方5分钟上手ECharts] |
在vue中使用Echarts[官方5分钟上手ECharts]
|
在vue中使用Echarts[官方5分钟上手ECharts]
（本文根据‘官方5 分钟上手 ECharts’文档，示例如何在vue项目中使用） 官方教程地址 [官方]5 分钟上手 ECharts ECharts // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); 1、通过 npm 获取 echarts npm install echarts --save 2、在vue项目中引入echarts在main.js中添加下面两行代码 main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts【注释】：import echarts from 'echarts' 引入echarts后，不能全局使用echarts, 所以通过Vue.prototype 将echarts保存为全局变量。原则上$echarts可以为任意变量名。 3、新建Echarts.vue 文件 在template中添加一个存放echarts 的'div'容器 添加myEcharts()方法，将官方文档中script内容复制到myEcharts()中 修改echarts.init()为this.$echarts.init() [因为上面第二步，将echarts保存到全局变量$echarts中] 在mounted中调用myEcharts()方法 Echarts.vue export default { name: 'Echarts', methods:{ myEcharts(){ // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }, mounted() { this.myEcharts(); } }【注释】本例函数使用ES6写法。mounted() { }等同mounted:function() { } myEcharts()方法同理 最后，添加进行路由配置。运行项目效果如下：
|
【本文地址】
今日新闻 |
推荐新闻 |