Vue.js中讓人容易忽略的API詳解
阿新 • • 發佈:2021-09-03
Vue中使用ECharts
1、安裝ECharts
npm install echarts -S
#或者使用淘寶的映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
2、專案引入
main.js
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、開啟專案檔案
<div id="myChart" :style="{width: '300px', height: '300px'}"></div> myEcharts(){ // 基於準備好的dom,初始化echarts例項 var myChart = this.$echarts.init(document.getElementById('myChart')); // 指定圖表的配置項和資料 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(); }