ECharts是啥Ｔ妗婶溯！
一個基于 JavaScript 的開源可視化圖表庫
在項目中引入 Apache ECharts
你可以使用如下命令通過 npm 安裝 ECharts
獲取npm的方式，本地安裝node就行了，如何獲取node晦譬，去node官網下載安裝包，傻瓜式安裝就好了
引入 ECharts
import * as echarts from 'echarts';
如果是在vue工程里使用互广，在main.js里敛腌，添加到vue實里面
在main.js里加入如下代碼
Vue.prototype.$echarts = echarts? ?
在組件里通過:this.$echarts就可以調用
在工程里新建Echarts.vue文件
在templateli 加入如下代碼
<template>
<div class="echarts-line">?
? <slot name="header" class="header-box">?
?? <span> {{ title }} </span>??
</slot>?
?<div ref="myChart" id="myChart" :style="{ height: '230px' }"></div>
</div>
</template>
在script加入如下代碼
export default {
name: 'EchartsLine',
data() {? ? return {? ? ? chart: null,? ? }? },
props: {? ? seriesData: {? ? ? type: Array,? ? ? required: true,? ? ? default: () => [],? ? },? ? extraOption: {? ? ? type: Object,? ? ? default: () => ({}),? ? },? ? xAxisOption: {? ? ? type: Object,? ? ? default: () => ({}),? ? },? ? title: {? ? ? type: String,? ? },? },
watch: {? ? seriesData: {? ? ? deep: true,? ? ? handler() {? ? ? ? this.drawLine()? ? ? },? ? },? },
mounted() {? ? this.drawLine()? ? window.addEventListener('resize', this.handleWindowResize)? },
?beforeDestroy() {? ? window.removeEventListener('resize', this.handleWindowResize)? },
? methods: {
mergeOptions() {? ? ? return {? ? ? ? // title: { text: '在Vue中使用echarts' },? ? ? ? tooltip: {},? ? ? ? dataZoom: [? ? ? ? ? // 主要是這一部分，他是折線圖的縮放功能的開啟? ? ? ? ? {? ? ? ? ? ? type: 'inside',? ? ? ? ? },? ? ? ? ],? ? ? ? grid: {? ? ? ? ? top: '8%',? ? ? ? ? left: '0%',? ? ? ? ? right: '0%',? ? ? ? ? bottom: '3%',? ? ? ? ? containLabel: true,? ? ? ? },? ? ? ? tooltip: {? ? ? ? ? trigger: 'axis',? ? ? ? ? axisPointer: {? ? ? ? ? ? type: 'shadow',? ? ? ? ? },? ? ? ? },? ? ? ? xAxis: this.xAxisOption,? ? ? ? yAxis: {? ? ? ? ? type: 'value',? ? ? ? },? ? ? ? series: this.seriesData,? ? ? ? ...this.extraOption,? ? ? }? ? },
handleWindowResize() {? ? ? if (!this.chart) return? ? ? this.chart.resize()? ? },
drawLine() {? ? ? console.log('this.$echarts', this.$echarts)? ? ? // 基于準備好的dom惫皱，初始化echarts實例? ? ? this.chart = this.$echarts.init(this.$refs.myChart)? ? ? let options = this.mergeOptions()? ? ? this.chart.setOption(options)? ? },
}
}
在style加入如下代碼
<style lang="scss" scoped>
.echarts-line {?
width: 100%;?
height: 100%;?
.header {? ?
font-size: 14px;?
? font-weight: 400;?
? color: #000000;?
}}
</style>
組件使用方法
在要使用的組件里引入組件并在components里注冊組件
import Echarts from './components/ Echarts '
components: {? ? Echarts? },
