大数据BI可视化(Echarts组件)项目开发-熟悉结合Vue开发图表组件7.0附带1/6商家销售统计（横向柱状图）

一.创建项目

创建

1.npm install -g @vue/cli

vue create vision

4.版本

5.是否使用历史路由

6.CSS预处理

7.ES标准配置

8.啥时候es标准提示-保存文件后

9.将配置文件放入单独文件中处理

10.需要保留新建项目以上设置

11.选择“Use PNPM”或者“Use NPM”

12.创建

13访问

删除无用项目代码

1.App.vue

静态资源引入

项目的基本配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
module.exports = {devServer: {port: 8888,open: true}
}

全局Echarts对象挂载

1.



<script src="static/lib/echarts.min.js"></script>

2.

// 将全局的echarts对象挂载到vue的原型对象上

// 别的组件使用 this.$echarts

Vue.prototype.$echarts = window.echarts

axios的封装与挂载

1.npm install axios

2.调用

// eslint-disable-next-line no-unused-vars
import axios from 'axios'
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api'
// 将axios挂载到vue的原型对象上
// 在别的组件 this.$http
Vue.prototype.$http = axios

二.单独图表组件开发

模板

V1

 <template><div ></div>
</template><script>
export default {data () {return {}},methods: {},components: {}
}
</script><style lang=less scoped>
</style>

商家销售统计（横向柱状图）

1.组件结构的设计

1.1创建SellerPage.vue

<!--针对 /sellerpage  这条路径而显示出来的在这个组件中，通过子组件注册方式，显示出seller.vue这个组件--><template><div ></div>
</template><script>
export default {data () {return {}},methods: {},components: {}
}
</script><style lang=less scoped>
</style>

1.2Seller.vue 呈现图表组件

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {}},mounted () {},// 生命周期destroyed () {},methods: {}
}
</script><style lang=less scoped></style>

1.3router 注入SellerPage文件，路由设置；

import Vue from 'vue'
import VueRouter from 'vue-router'
import SellerPage from '@/views/SellerPage.vue'Vue.use(VueRouter)const routes = [{path: '/sellerpage',component: SellerPage}
]const router = new VueRouter({routes
})export default router

1.4app.vue 声明路由占位符

<template><div id="app"><!-- 路由占位符 --><router-view></router-view></div>
</template><style lang="less">
</style>

1.5访问sellerpage.vue内容

1.6通过sellerpage文件访问seller文件

<!--针对 /sellerpage  这条路径而显示出来的在这个组件中，通过子组件注册方式，显示出seller.vue这个组件--><template><div><seller></seller></div>
</template><script>
// eslint-disable-next-line no-unused-vars
import Seller from '@/components/Seller.vue'
export default {data () {return {}},methods: {},components: {// eslint-disable-next-line vue/no-unused-componentsseller: Seller}
}
</script><style lang=less scoped>
</style>

2.布局结构的设计

2.1seller文件设置样式

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {}},mounted () {},// 生命周期destroyed () {},methods: {}
}
</script><style lang=less scoped></style>

2.2sellerpage文件设置样式

<!--针对 /sellerpage  这条路径而显示出来的在这个组件中，通过子组件注册方式，显示出seller.vue这个组件--><template><div class="com-page"><seller></seller></div>
</template><script>
// eslint-disable-next-line no-unused-vars
import Seller from '@/components/Seller.vue'
export default {data () {return {}},methods: {},components: {// eslint-disable-next-line vue/no-unused-componentsseller: Seller}
}
</script><style lang=less scoped>
</style>

2.3在asset中编写css文件

html,body,#app {width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;
}.com-page{width: 100%;height: 100%;overflow: hidden;
}.com-container{width: 100%;height: 100%;overflow: hidden;
}.com-chart{width: 100%;height: 100%;overflow: hidden;
}

3.4在main.js引入全局样式

// 引入全局的样式文件
import './assets/css/global.less'

3.5查看

3.图表基本功能的实现

3.1initChart 初始化echartsinstance对象

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null}},mounted () {this.initChart()},// 生命周期destroyed () {},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据getData () {},// 更新图表updatechart () {}}
}
</script><style lang=less scoped></style>

3.2getData获取数据

3.2.1获取数据

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst ret = await this.$http.get('seller')console.log(ret)},// 更新图表updatechart () {}}
}
</script><style lang=less scoped></style>

3.2.2提取data数据

    async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')console.log(ret)},

3.3updateChart跟新图表显示

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null // 服务器返回的数据}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 调用updatechartthis.updatechart()},// 更新图表updatechart () {// y轴// eslint-disable-next-line no-undefconst sellerNames = this.allData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = this.allData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)}}
}
</script><style lang=less scoped></style>

4.动态刷新的实现

4.1数据处理

4.1.1数据从小到大排序

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null // 服务器返回的数据}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 调用updatechartthis.updatechart()},// 更新图表updatechart () {// y轴// eslint-disable-next-line no-undefconst sellerNames = this.allData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = this.allData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)}}
}
</script><style lang=less scoped></style>

4.1.2每五个元素一页

currentPage 第几页
totaPage 总共几页

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)}}
}
</script><style lang=less scoped></style>

4.2启动和停止的时机

4.2.1获取数据之后

启动定时器

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)},startInterval () {setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updatechart()}, 3000)}}
}
</script><style lang=less scoped></style>

关闭定时器

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {clearInterval(this.timerId)},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)},startInterval () {if (this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updatechart()}, 3000)}}
}
</script><style lang=less scoped></style>

4.2.2鼠标移出图表时启动定时器

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {clearInterval(this.timerId)},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)// 对图表对象进行鼠标事件的监听this.chartInstance.on('mouseover', () => {clearInterval(this.timerId)})this.chartInstance.on('mouseout', () => {this.startInterval()})},startInterval () {if (this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updatechart()}, 3000)}}
}
</script><style lang=less scoped></style>

4.3边界值的处理

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {clearInterval(this.timerId)},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)// 对图表对象进行鼠标事件的监听this.chartInstance.on('mouseover', () => {clearInterval(this.timerId)})this.chartInstance.on('mouseout', () => {this.startInterval()})},startInterval () {if (this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updatechart()}, 3000)}}
}
</script><style lang=less scoped></style>

5.UI调整

5.1主题使用

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><!-- 一旦通过script标签引入的echarts.js文件后，window.echarts --><script src="static/lib/echarts.min.js"></script><!-- 引入主题的js文件 --><script src="static/theme/chalk.js"></script>    </body>
</html>

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {clearInterval(this.timerId)},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},series: [{type: 'bar',data: sellerValue}]}this.chartInstance.setOption(option)// 对图表对象进行鼠标事件的监听this.chartInstance.on('mouseover', () => {clearInterval(this.timerId)})this.chartInstance.on('mouseout', () => {this.startInterval()})},startInterval () {if (this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updatechart()}, 3000)}}
}
</script><style lang=less scoped></style>

5.2图表的圆角

html,body,#app {width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;
}.com-page{width: 100%;height: 100%;overflow: hidden;
}.com-container{width: 100%;height: 100%;overflow: hidden;
}.com-chart{width: 100%;height: 100%;overflow: hidden;
}//图表圆角
canvas {border-radius: 20px;}

5.3图表的标题

        title: {text: '▎商家销售统计',textStyle: {fontSize: 66},

5.4坐标轴的位置

        grid: {top: '20%',left: '3%',right: '6%',bottom: '3%',containLabel: true // 距离是包含坐标轴上的文字},

5.5柱状图条目

宽度

        series: [{type: 'bar',data: sellerValue,barWidth: 66}]

文字

            label: {show: true,position: 'right',textStyle: {color: 'white'}}

右边圆角

            itemStyle: {barBorderRadius: [0, 33, 33, 0]}

颜色渐变

              // 指明颜色渐变的方向// 指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [// 百分之0状态之下的颜色值{offset: 0,color: '#5052EE'},// 百分之100状态之下的颜色值{offset: 1,color: '#AB6EE5'}])

背景

        tooltip: {trigger: 'axis', // 鼠标移动坐标轴触发axisPointer: { // 触发的样式type: 'line', // 类型z: 0, // 层级lineStyle: {width: 66, // 宽度color: '#2D3443' // 颜色}}},

6.拆分图表的option

保留拆分前代码

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()},// 生命周期destroyed () {clearInterval(this.timerId)},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const option = {title: {text: '▎商家销售统计',textStyle: {fontSize: 66},left: 20,top: 20},grid: {top: '20%',left: '3%',right: '6%',bottom: '3%',containLabel: true // 距离是包含坐标轴上的文字},xAxis: {type: 'value'},yAxis: {type: 'category',data: sellerNames},tooltip: {trigger: 'axis', // 鼠标移动坐标轴触发axisPointer: { // 触发的样式type: 'line', // 类型z: 0, // 层级lineStyle: {width: 66,color: '#2D3443' // 颜色}}},series: [{type: 'bar',data: sellerValue,barWidth: 66,label: {show: true,position: 'right',textStyle: {color: 'white'}},itemStyle: {barBorderRadius: [0, 33, 33, 0],// 指明颜色渐变的方向// 指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [// 百分之0状态之下的颜色值{offset: 0,color: '#5052EE'},// 百分之100状态之下的颜色值{offset: 1,color: '#AB6EE5'}])}}]}this.chartInstance.setOption(option)// 对图表对象进行鼠标事件的监听this.chartInstance.on('mouseover', () => {clearInterval(this.timerId)})this.chartInstance.on('mouseout', () => {this.startInterval()})},startInterval () {if (this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.currentPage++if (this.currentPage > this.totalPage) {this.currentPage = 1}this.updatechart()}, 3000)}}
}
</script><style lang=less scoped></style>

6.1初始化配置initOption

      // 对图表初始化配置的控制const initOption = {title: {text: '▎商家销售统计',textStyle: {fontSize: 66},left: 20,top: 20},grid: {top: '20%',left: '3%',right: '6%',bottom: '3%',containLabel: true // 距离是包含坐标轴上的文字},xAxis: {type: 'value'},yAxis: {type: 'category'},tooltip: {trigger: 'axis', // 鼠标移动坐标轴触发axisPointer: { // 触发的样式type: 'line', // 类型z: 0, // 层级lineStyle: {width: 66,color: '#2D3443' // 颜色}}},series: [{type: 'bar',barWidth: 66,label: {show: true,position: 'right',textStyle: {color: 'white'}},itemStyle: {barBorderRadius: [0, 33, 33, 0],// 指明颜色渐变的方向// 指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [// 百分之0状态之下的颜色值{offset: 0,color: '#5052EE'},// 百分之100状态之下的颜色值{offset: 1,color: '#AB6EE5'}])}}]}this.chartInstance.setOption(initOption)

6.2获取数据之后的配置dataOption

      const dataOption = {yAxis: {data: sellerNames},series: [{data: sellerValue}]}this.chartInstance.setOption(dataOption)

6.3分辨率适配的配置adapterOption

监听窗口大小变化的事件

获取图表容器的宽度

设置新的option
- 标题文字大小
- 柱的宽度
- 柱的圆角
- 阴影背景宽度

图表实例对象resize

取消监听

  // 生命周期destroyed () {clearInterval(this.timerId)// 在组件销毁的时候, 需要将监听器取消掉window.removeEventListener('resize', this.screenAdapter)},

代码

  mounted () {this.initChart()this.getData()// 窗口发生变动自动调用screenAdapter方法window.addEventListener('resize', this.screenAdapter)// 在页面加载完成的时候, 主动进行屏幕的适配this.screenAdapter()},

  // 生命周期destroyed () {clearInterval(this.timerId)// 在组件销毁的时候, 需要将监听器取消掉window.removeEventListener('resize', this.screenAdapter)},

    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配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()}

拆分后代码

<!-- eslint-disable vue/multi-word-component-names -->
<!--  商家销量统计的横向柱状图-->
<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div></template><script>
export default {data () {return {chartInstance: null,allData: null, // 服务器返回的数据currentPage: 1, // 当前显示的页数totalPage: 0 // 一共有多少页}},mounted () {this.initChart()this.getData()// 窗口发生变动自动调用screenAdapter方法window.addEventListener('resize', this.screenAdapter)// 在页面加载完成的时候, 主动进行屏幕的适配this.screenAdapter()},// 生命周期destroyed () {clearInterval(this.timerId)// 在组件销毁的时候, 需要将监听器取消掉window.removeEventListener('resize', this.screenAdapter)},methods: {// 初始化echartsinstance对象initChart () {this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')// 对图表初始化配置的控制const initOption = {title: {text: '▎商家销售统计',left: 20,top: 20},grid: {top: '20%',left: '3%',right: '6%',bottom: '3%',containLabel: true // 距离是包含坐标轴上的文字},xAxis: {type: 'value'},yAxis: {type: 'category'},tooltip: {trigger: 'axis', // 鼠标移动坐标轴触发axisPointer: { // 触发的样式type: 'line', // 类型z: 0, // 层级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, [// 百分之0状态之下的颜色值{offset: 0,color: '#5052EE'},// 百分之100状态之下的颜色值{offset: 1,color: '#AB6EE5'}])}}]}this.chartInstance.setOption(initOption)},// 获取数据async getData () {// http://127.0.0.1:8888/api/sellerconst { data: ret } = await this.$http.get('seller')// console.log(ret)this.allData = ret// 对数据排序this.allData.sort((a, b) => {return a.value - b.value // 从小到大})// 每5个元素显示一页this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1// 调用updatechartthis.updatechart()// 启动定时器this.startInterval()},// 更新图表updatechart () {const start = (this.currentPage - 1) * 5const end = this.currentPage * 5// eslint-disable-next-line no-unused-varsconst showData = this.allData.slice(start, end)// y轴// eslint-disable-next-line no-undefconst sellerNames = showData.map((item) => {return item.name})// x轴// eslint-disable-next-line no-undefconst sellerValue = showData.map((item) => {return item.value})const dataOption = {yAxis: {data: sellerNames},series: [{data: sellerValue}]}this.chartInstance.setOption(dataOption)// 对图表对象进行鼠标事件的监听this.chartInstance.on('mouseover', () => {clearInterval(this.timerId)})this.chartInstance.on('mouseout', () => {this.startInterval()})},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><style lang=less scoped></style>