在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1.在html文件导入echart<!-- 引入echarts --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> 2.在main.js上挂载echarts对象Vue.prototype.$echarts = window.echarts // 使用时直接使用this.$echarts 3.页面结构<template> <div class="com-container"> <div class="com-chart" ref="sellerRef"></div> </div> </template> 4.data中的数据export default { data () { return { // 初始化的图表 chartInstance: null, allDate: null, // 服务器返回的数据 } }, } ```js ##### 5.methods中的逻辑 ```js methods: { // 初始化echarts对象 initEchart(){ // 获取dom对象 this.chartInstance = this.$echarts.init(this.$refs.sellerRef) }, // 获取服务器的数据 async getData(){ const {data:res} = await this.$http.get('seller') this.allDate = res // 返会的数据结构是 name商家 value数值 // 对返回的数据进行从小打到排序 sort方法 this.allDate.sort((a, b) => { return a.value - b.value }) // 调用更新视方法 this.updateChart() }, // 更新图表 updateChart(){ // y轴类目轴的数据 const sellerNames = this.allDate.map(item=>{ // 根据你的需求调整 return item.name }) // x轴数值轴的数据 const sellerValues = this.allDate.map(item=>{ return item.value }) const option = { xAxis: { type: 'value' }, yAxis: { type: 'category', // y轴坐标轴使用遍历出来的name data: sellerNames }, series: [ { // 类型为柱状图 type: 'bar', // x轴数据需要设置在series的data类型为遍历的value data: sellerValues } ] } // 渲染optio数据给dom对象 this.chartInstance.setOption(option) }, mounted钩子函数调用// dom加载完成调用 mounted () { this.initChart() this.getData() }, 更改柱形图配置
|
请发表评论