vue-cli搭建的專案中使用Echarts
阿新 • • 發佈:2018-12-09
1、安裝
cnpm install echarts --save-dev
2、在專案的main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
3、在Vue組建中使用
<template> <div ref="lineImg" class="lineEcharts"></div> </template> <script> import echarts from 'echarts'; export default { name: 'lineCharts', mounted () { // 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(this.$refs.lineImg); // 指定圖表的配置項和資料 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); } }; </script> <style scoped> .lineEcharts { width: 500px; height: 300px; border: 1px solid #ccc; margin: 0 auto; } </style>
注意:在繪圖前必須要為 ECharts 準備一個具備高寬的 DOM 容器。在Vue中用ref獲取DOM元素