Vue.js进阶【8】vue使用echarts

Vue.js进阶文章列表

Vue.js进阶【4-0】用vue-cli 命令

命令行安装

npm install echarts --save

main.js

// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts

HelloWorld.vue

<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <h2>Ecosystem</h2> <div id="main" style="width: 500px;height:300px;"></div> </div> </template> <script> export default { name: 'hello', mounted: function () { var _this = this console.log('mounted function') this.$nextTick(function () { _this.show() }) }, data: function () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { show: function () { console.log('show function') this.msg = '1111111111' // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('main')) console.log('myChart =' + myChart) // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }) } } } </script> <!-- Add 'scoped' attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>