import * as echarts from 'echarts';
3.在页面中设置ECharts
<template>
<!--应收款分析-->
<div className="com-threemoisten" ref="threemoistenRef" style=" 503px;height:208px;">
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data () {
return {
myChartname: null, // 图表对象
standardsize: 1 // 全局标准值
}
},
mounted () {
// 挂载图标
this.initChart()
window.addEventListener('resize', this.screenAdapter)
// 屏幕适配
this.screenAdapter()
},
destroyed () {
// 移除监听
window.removeEventListener('resize', this.screenAdapter)
},
methods: {
// 初始化图表
initChart () {
this.myChartname = echarts.init(this.$refs.threemoistenRef)
// 图表基础配置
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 设置数据
this.myChartname.setOption(option)
},
// 获取数据
getData () {
},
// 更新图表
updataChart () {
// 设置请求的数据
var upoption = {
}
this.myChartname.setOption(upoption)
},
// 屏幕适配
screenAdapter () {
this.standardsize = this.$refs.threemoistenRef.offsetWidth / 335
const adapterOption = {}
this.myChartname.setOption(adapterOption)
// 手动调用图表对象resize
this.myChartname.resize()
}
}
}
</script>
<style>
.com-threemoisten {
background: #051045;
}
</style>
