安裝
yarn add echarts vue-echarts
引入
import echarts from 'echarts'
如用TypeScript，還需安裝yarn add --dev @types/echarts
使用
<template>
<Echart :options="polar"/>
</template>
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
@Component({
components: {ECharts}
})
export default class Chart extends Vue {
get polar(){
return {
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'
}],
tooltip: {show: true}
}
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
可得到折線圖崔挖，具體圖表樣式的修改可參考ECharts官網(wǎng)。
image.png
