引入echarts文件，在index.html导入echarts包，或者npm install 安装echarts。 然后将全局echarts对象挂载到原型对象上，在main.js中：Vue.prototype.$echarts = window.echarts。
安装axios,npm install axios。在main.js中导入import axios from 'axios'， 配置基准路径：axios.defaults.baseURL = 'http://127.0.0.1:8888/api/' 。 将其挂载到原型对象上Vue.prototype.$http = axios。后面可以通过this.$http.get获取。
图表基本功能的实现：
<script>
export default {
data() {
return {
chartInstance: null,
allData: null, //服务器返回数据
currentPage: 1, //当前页数
totalpage: 0, //总的页数
timerId: null, //定时器标识
}
},
mounted() {
this.initChart();
this.getData();
// resize事件监听窗口变化，调用screenAdapter函数。
window.addEventListener('resize', this.screenAdapter);
this.screenAdapter()
},
beforeDestroy() {
clearInterval(this.timerId);
window.removeEventListener('resize', this.screenAdapter)
},
methods: {
// 初始化echartInstance对象
initChart() {
// 为echarts图表挂载到对应的盒子上
this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')
// 对图表初始化配置的控制
const initOption = {
//标题
title: {
text: '📕 商家销售量统计',
left: 20,
top: 20
},
//图表距离容器的距离
grid: {
top: '20 %',
bottom: '3 %',
left: '3 %',
right: '6 %',
containLabel: true //距离是包含坐标轴上的文字
},
//x坐标轴
xAxis: {
type: 'value'
},
//y坐标轴
yAxis: {
type: 'category',
},
//提示框
tooltip: {
trigger: 'axis', //触发类型，坐标轴触发
axisPointer: {
type: 'line', //指示器类型：直线
z: 0, //z-index，显示优先级。
lineStyle: {
color: '#2D3443'
}
}
},
// 系列
series: [
{
type: 'bar', //类型：柱状图
//标签右侧显示
label: {
show: true,
position: 'right',
textStyle: {
color: 'white'
}
},
//每个柱状的样式风格
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#5052EE'
}, {
offset: 1,
color: '#AB6EE5'
}])
}
}
]
}
this.chartInstance.setOption(initOption) //配置图表样式
this.chartInstance.on('mouseover', () => {
clearInterval(this.timerId) //鼠标移入，清除定时器。
}),
this.chartInstance.on('mouseout', () => {
this.startInterval() //鼠标移出，开始定时器
})
},
// 获取数据，对数据进行简单处理
async getData() {
const { data: ret } = await this.$http.get('seller')
this.allData = ret
this.allData.sort((a, b) => {
return a.value - b.value
})
this.totalpage = this.allData.length % 5 == 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
this.updateChart()
this.startInterval()
},
// 更新图表，图标更新之后需要在getData里进行调用。
updateChart() {
// const start = (this.currentPage - 1) * 5
// const end = this.currentPage * 5
const showDate = this.allData.slice((this.currentPage - 1) * 5, this.currentPage * 5)
const sellerNames = showDate.map((item) => {
return item.name
})
const sellerValues = showDate.map((item) => {
return item.value
})
const dataOption = {
yAxis: {
data: sellerNames
},
series: [
{
data: sellerValues,
}
]
}
this.chartInstance.setOption(dataOption)
},
//定时器
startInterval() {
if (this.timerId) {
clearInterval(this.timerId)
}
this.timerId = setInterval(() => {
this.currentPage++;
if (this.currentPage > this.totalpage) {
this.currentPage = 1
}
this.updateChart();
}, 3000)
},
//屏幕适配
screenAdapter() {
// console.log(this.$refs.seller_ref.offsetWidth)
const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6;
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize
},
},
tooltip: {
axisPointer: {
lineStyle: {
width: titleFontSize,
}
}
},
series: [
{
barWidth: titleFontSize,
itemStyle: {
barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
}
}
]
}
this.chartInstance.setOption(adapterOption)
//手动调用图标对象的resize才能产生效果。
this.chartInstance.resize()
}
}
}
</script>
