vue工程整合Apache ECharts
阿新 • • 發佈:2021-09-08
Apache ECharts官網地址:https://echarts.apache.org/zh/index.html
1、安裝echarts庫
npm install echarts --save
2、匯入在main.js匯入,以便全域性使用
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
3、以柱狀圖為例
(1)建立vue頁面,準備一個dom元素放置柱狀圖
<template> <div id="app-echarts"> <div id="main" style="width: 600px;height:400px;"></div> </div> </template>
(2)使用官網例子,進行對js進行修改
在全域性引用之後需要修改,this.$echarts.init 這樣寫才可以正常顯示繪製圖
// 基於準備好的dom,初始化echarts例項
var myChart = this.$echarts.init(document.getElementById('main'));
<script> export default{ data(){ return{} }, mounted() { this.initeCharts(); }, methods:{ initeCharts(){ // 基於準備好的dom,初始化echarts例項 var myChart = this.$echarts.init(document.getElementById('main')); // 繪製圖表 myChart.setOption({ title: { text: 'ECharts 入門示例' }, tooltip: {}, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } } </script>
(3)完整程式碼
<template> <div id="app-echarts"> <div id="main" style="width: 600px;height:400px;"></div> </div> </template> <script> export default{ data(){ return{} }, mounted() { this.initeCharts(); }, methods:{ initeCharts(){ // 基於準備好的dom,初始化echarts例項 var myChart = this.$echarts.init(document.getElementById('main')); // 繪製圖表 myChart.setOption({ title: { text: 'ECharts 入門示例' }, tooltip: {}, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } } </script> <style> </style>
注意點
- myChart.setOption({}) 這個方法的setOption部分是沒有 s 的,有 s 的方法是不正確的