前端vue显示柱状图_vue 中使用vue-echarts-v3编写chart柱状图，动态展示数据-Go语言中文社区...

效果如下

需求：

1、纵坐标为数字，并且动态变化

2、柱状图顶部展示内容

3、鼠标移动到柱状图展示内容

4、图表要根据查询结果动态展示

开始：

import IEcharts from 'vue-echarts-v3';

export default {

data () {

return {

loading: false,

maxy:200,//纵坐标

xdata:[0,0]//柱体横坐标

}

},

watch:{

},

methods: {getCount(timestr,sender,checked){

this.$http.post(this.getUrl()+"/email/getCount.do", {timestr : timestr,sender:sender,checked:checked},{emulateJSON:true}).then(

(data)=>{

this.maxy = data.body.totalnum; //从后台获取总数，并设置纵坐标

this.xdata = [data.body.valopennum,data.body.opennum];//  并设置横坐标数据

},(error)=>{

console.log("错误");

}

)

},

onReady(instance){

console.log(instance);

},

onClick(event, instance, echarts){

// let gg = event;dataIndex

let emailstate = "";

if(event.dataIndex==0){//点击了第一个柱体

//逻辑判断

}else{点击了第二个柱体

//逻辑判断}

},

Percentage(num, total) { //求百分数，两位小数

let rate = Math.round(num / total * 10000) / 100.00 + "%";

if(rate=="NaN%"){

return "0.00%";

}else{

return rate;

}

}

},

mounted () {

},

computed:{

bar:function(){//个人测试得知不能把bar写在data内，因为无法动态改变数据，不知道是不是自己哪里没有设置好

return{

title: {//图表标题

text: '统计分析'

},

color:['rgb(25, 183, 207)'],

tooltip: {

trigger : 'item',

show:true,

showDelay: 0,

hideDelay: 0,

transitionDuration:0,

backgroundColor : 'rgba(25, 183, 207,1)',

borderColor : '#f50',

borderRadius : 8,

borderWidth: 2,

padding: 10,    // [5, 10, 15, 20]

formatter:(params,ticket,callback)=> {//可以从params中拿到柱体的数据

return "点击查看";

}

},

xAxis: {

data: ['当天打开数/打开率', '总打开数/打开率']

},

calculable :true,

yAxis: [

{

max:this.maxy,//动态改变纵坐标总数

splitNumber:1,//分割成1段

type : 'value',

data :[0]

}

],

series: [{

name: 'series_name',

type: 'bar',

data: this.xdata,

itemStyle:{

normal:{

label : {

show : true,

position : 'top'  , //柱体定不显示内容top,right,left

formatter:(params,ticket,callback)=>

{

let percent = this.Percentage(params.value,this.maxy);

var res = "打开率："+percent+'nn'+"打开数："+params.value;

return res;

}

}

},

emphasis : {

label : {

show : true,

textStyle : {

color : 'orange',

fontWeight : 'bold'

}

}

}

}

}]

}

},

},

components: {//使用的外部组件都需要在此填写

IEcharts

}

}

说明：

1、首先要在IEcharts标签内定义高度和宽度，否则不会显示，只在父标签上定义高度和宽度也不行

2、option属性对应的变量bar必须写在computed中，不能写在data中，个人测试写在data中无法动态改变数据表现在图表中

问题：如图中所示，不晓得怎么会出现两个分段，还在解决中