vue echarts vue-echarts組件使用

一、git地址

https://github.com/ecomfe/vue-echarts

二、使用

（1）安裝

npm install vue-echarts --save-dev

（2）引入

import ECharts from 'vue-echarts' import 'echarts' components: { 'v-chart': ECharts }//引入組件

注意：

 官方說明中引入是這樣的：

import ECharts from 'vue-echarts/components/ECharts.vue'

可是會報錯：options": "Error: Component series.pie not exists. Load it first.

（3）代碼

<template> <v-chart :options="polar"/> </template> <style> .echarts { width: 100%; height: 100%; } </style> //data： data: function () { let data = [] for (let i = 0; i <= 360; i++) { let t = i / 180 * Math.PI let r = Math.sin(2 * t) * Math.cos(2 * t) data.push([r, i]) } return { polar: { title: { text: '極座標雙數值軸' }, legend: { data: ['line'] }, polar: { center: ['50%', '54%'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, angleAxis: { type: 'value', startAngle: 0 }, radiusAxis: { min: 0 }, series: [ { coordinateSystem: 'polar', name: 'line', type: 'line', showSymbol: false, data: data } ], animationDuration: 2000 } } }

（4）一個比較有用的屬性

• auto-resize （默認值：false）

  這個 prop 用來指定 ECharts 實例在組件根元素尺寸變化時是否須要自動進行重繪。