<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {loadHistogram} from '@/api/loadInfo'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null,
dataInfo:[],
}
},
mounted() {
this.$nextTick(() => {
this.DoloadHistogram();
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
DoloadHistogram(){
loadHistogram().then(
responese =>{
this.dataInfo = responese.data;
console.log(this.dataInfo);
}
)
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: dataInfo,
animationDuration
}]
})
}
}
}
</script>
element ui + echarts 数据无法绑定
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- Six_Rabbit 2021-04-01 16:54关注
已经解决
代码如下
<template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from 'echarts' require('echarts/theme/macarons') // echarts theme import resize from './mixins/resize' import {loadHistogram} from '@/api/loadInfo' const animationDuration = 6000 export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '300px' } }, data() { return { chart: null, dataInfo:[], } }, mounted() { this.$nextTick(() => { this.DoloadHistogram(); this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { DoloadHistogram(){ loadHistogram().then( responese =>{ this.dataInfo = responese.data; this.initChart(this.dataInfo); } ); }, initChart(dataInfo) { this.chart = echarts.init(this.$el, 'macarons') this.chart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { top: 10, left: '2%', right: '2%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'], axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value', axisTick: { show: false } }], series: [{ name: 'pageA', type: 'bar', stack: 'vistors', barWidth: '60%', data: dataInfo, animationDuration }] }) } } } </script>
解决 无用评论 打赏 举报
悬赏问题
- ¥30 为什么会失败呢,该如何调整
- ¥50 如何在不能联网影子模式下的电脑解决usb锁
- ¥20 服务器redhat5.8网络问题
- ¥15 如何利用c++ MFC绘制复杂网络多层图
- ¥20 要做柴油机燃烧室优化 需要保持压缩比不变 请问怎么用AVL fire ESE软件里面的 compensation volume 来使用补偿体积来保持压缩比不变
- ¥15 python螺旋图像
- ¥15 算能的sail库的运用
- ¥15 'Content-Type': 'application/x-www-form-urlencoded' 请教 这种post请求参数,该如何填写??重点是下面那个冒号啊
- ¥15 找代写python里的jango设计在线书店
- ¥15 请教如何关于Msg文件解析