验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
vue结合echarts做的一个表格插件
Raw Copy
<template>
<div class="charts-line"></div>
</template>
<script>
import ECharts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'
export default {
methods: {
showLoading: function () {
this.charts.showLoading()
}
},
data() {
return {
charts: null
}
},
props: {
options: [Object],
loading: {type:Boolean, default: true}
},
mounted() {
//设置echarts的主题颜色
this.charts = ECharts.init(this.$el, {color: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487']})
let option = {
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
splitLine: {show: true},
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: []
}
this.showLoading()
this.charts.setOption(option)
if (this.options) {
this.charts.setOption(this.options)
this.charts.hideLoading()
}
},
watch: {
options: {
handle: function (val) {
this.charts.setOption(this.options)
this.charts.hideLoading()
},
deep: true
},
loading: function (val) {
if (val === true || val === 'true') {
this.showLoading()
} else {
this.charts.hideLoading()
}
}
},
name: "charts-line"
}
</script>
<style scoped>
.charts-line {
width: 100%;
height: 260px;
}
</style>

Comment list( 0 )

You need to Sign in for post a comment

Help Search