首先下载:
npm install echarts vue-echarts
然后全局引入:
//main.js
import Vue from 'vue'
import ECharts from "vue-echarts";
Vue.component('v-chart', ECharts)//全局注册
在对应的文件里面具体使用(我这里是折线图):
<template>
<div class="verify-line">
<v-chart :options="lineOption"
autoresize />
</div>
</template>
<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/axis'
import 'echarts/lib/component/tooltip'//这里需要引入,不然提示没效果
export default {
name: 'line',
props: {
info: {//这里是传进来的折线图数据
type: Array,
default: () => {
return []
}
}
},
data() {
const splitLineStyle = {
show: true,
lineStyle: {
color: ['rgb(241, 241, 241)'],
width: 1,
type: 'soli