当前位置：首页 > news >正文

echart实现柱状图并实现柱子上方需要显示指定文字，以及悬浮出弹框信息，动态出现滚动条，动态更新x，y轴的坐标名称

news 来源：原创 2025/4/25 12:10:42

这个option1对象是参考echart官方的例子Examples - Apache ECharts

主要看下方代码

      <div id="barChart"></div>

  data() {return {option1: {legend: {show: false},tooltip: {trigger: 'axis',//悬浮显示当前柱子的信息},dataset: {dimensions: ['product', '2015', '2016', '2017', '2018', '2019', '2020',],source: [{ product: '1月', 2015: 43.3, 2016: 85.8, 2017: 93.7, 2018: 93.7, 2019: 93.7, 2020: 91 },{ product: '2月', 2015: 83.1, 2016: 73.4, 2017: 55.1, 2018: 93.7, 2019: 93.7, 2019: 93.7, 2020: 91, },{ product: '3月', 2015: 86.4, 2016: 65.2, 2017: 82.5, 2018: 93.7, 2019: 93.7, 2019: 93.7, 2020: 91, },{ product: '4月', 2015: 79, 2016: 53.9, 2017: 39.1, 2018: 93.7, 2019: 93.7, 2019: 93.7, 2020: 91, },{ product: '5月', 2015: 81, 2016: 53.9, 2018: 39.1, 2017: 93.7, 2019: 93.7, 2020: 110, },{ product: '6月', 2015: 81, 2016: 53.9, 2018: 39.1, 2017: 93.7, 2019: 93.7, 2020: 160, },{ product: '7月', 2015: 81, 2016: 53.9, 2018: 39.1, 2017: 93.7, 2019: 93.7, 2020: 160, }]},xAxis: { type: 'category',},yAxis: {name: '订单数：件'},series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' },],},
}

由于要实现动态柱状图，接口数据接口参考上面，（下面是我做的时候后端给的接口）

获取接口数据并动态渲染数据

  watch: {option1: {handler() {this.mychart1(); //数据变化就执行渲染echart},deep: true},methods: {
// 渲染echartmychart1() {var echart = this.$echarts.init(document.getElementById("barChart"));echart.setOption({}, true)var echart = this.$echarts.init(document.getElementById("barChart"));echart.off('legendselectchanged') //解决重复触发echart.resize();echart.setOption(this.option1, true);//},
}// 获取后台柱状图数据接口CustomizedShPzMetricsTrendsFun() {customizedShPzMetricsTrends(this.searchObj).then(res => {if (res.data) {
//主要看这里！！！！！！！！！！！this.customizedShPzChat = res.datathis.option1.dataset.dimensions = res.data.dimensions this.option1.dataset.source = res.data.sourcevar series=res.data.series  series.forEach(item => {item.label={show: true,            // 显示标签position: 'top',      // 标签显示在柱状图顶部formatter: function (params) {  //按照需求显示x,y轴信息，可以按需求拼接return  params.seriesName + ': ' + params.value[params.dimensionNames[params.encode.y[0]]]}}});this.option1.series=res.data.series  //数据组装好后赋值if(this.activeName==1||this.activeName==2){ //动态更新下x,y轴坐标名称this.option1.yAxis= {name: '订单数：件'}}if(this.activeName==3){this.option1.yAxis= {name: '承担金额：元'}}if (res.data.source) {if (res.data.source.length > 6) {  //我这里是动态出现滚动条，当数据大于6时，显示// 滚动条this.option1.dataZoom = [{bottom: '0',// "fillerColor": "#409eff", // 滚动条颜色// 		"borderColor": "#D8DEEE",realtime: true,startValue: 0,endValue: 14,height: 15,type: 'slider', // 滑动条start: 0,      // 初始的缩放窗口起始位置百分比end: 50         // 初始的缩放窗口结束位置百分比},{type: 'inside'  // 内置的缩放控制器}]}else{this.option1.dataZoom=[]    //否则滚动条隐藏}this.$forceUpdate();// 强制更新this.mychart1()  //数据变化时，要渲染下柱状图}} else {}}).catch(() => {})},