echart自定义tooltip

最新推荐文章于 2024-06-04 15:56:49 发布

汪小敏同学

最新推荐文章于 2024-06-04 15:56:49 发布

阅读量861

点赞数

分类专栏： vue基础知识总结文章标签： tensorflow python vue.js

本文链接：https://blog.csdn.net/weixin_44692055/article/details/121528503

版权

vue基础知识总结专栏收录该内容

70 篇文章 5 订阅

订阅专栏

option = {
    title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip : {
      
        formatter(params){
        
                return params[x].name +":"+params[x].data.value+"</br>"+params[x].data.max;
           
             
        }
    },
    legend: {
        data:['#100逆变器','101逆变器']
    },
    xAxis : [
        {
            type : 'category',
            data : ['#100逆变器','101逆变器']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸发量',
            type:'bar',
            data:[{'max':'508','value':'504','min':'45'}, {'max':'34','value':'104.5','min':'45'}]
        },
        {
            name:'降水量',
            type:'bar',
            data:[{'max':'50','value':'850.0','min':'45'}, {'max':'134','value':'350','min':'35'}]
        }
    ]
};

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<div id="main" style="width: 600px;height:400px;"></div>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					visible: false,
				}
			},
			created: function() {

			},
			mounted() {
				this.desMet();
			},
			methods: {
				desMet() {

					var response = {
						code: 200,
						data: {
							xAxisData: ["#100逆变器", "#101逆变器"],
							yAxisData: {
								总发电量: [{
									max: "509",
									avg: "504.5",
									min: "500"
								}, {
									max: "850",
									avg: "850.0",
									min: "850"
								}],
								预测: [{
									max: "109",
									avg: "104.5",
									min: "100"
								}, {
									max: "150",
									avg: "350.0",
									min: "850"
								}]
							}
						}
					}
					var series = [];
					var nameKey = [];
					Object.keys(response.data.yAxisData).forEach((key) => {
						console.log("key:", key, "value:", response.data.yAxisData[key]);

						nameKey.push(key);

						series.push({
							name: key,
							type: 'bar',
							data: response.data.yAxisData[key]
						})
					});
					for (var i = 0; i < series.length; i++) {
						var arrTemp = series[i].data;
						for (var j = 0; j < arrTemp.length; j++) {
							this.$set(arrTemp[j], "value", arrTemp[j].avg)

						}
					}

					console.log("---", series);
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));
					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '' // 柱状图标题，位于柱状图左上角。
						},
						tooltip: {
							formatter(params) {
								
							
									return  params[x].name+"</br>"+  params[x].seriesName + "</br>" + "最大值:" + params[x].data.max + "V" +
										"</br>" + "平均值" + params[x].data.value + "V" + "</br>" + "最小值:" + params[
											x].data.min + "V";
								

							}
						},
						legend: {
							data: nameKey,
							  type: "plain",
							  
								 symbolKeepAspect: true, 
						},
						xAxis: [{
							type: 'category',
							data: ['#100逆变器', '101逆变器']
						}],
						yAxis: [{
							type: 'value'
						}],
						series: series
					};
myChart.on('click', function (params) {
          console.log(params)
        })
					myChart.setOption(option)
				}
			}

		})
	</script>
</html>

汪小敏同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echart自定义tooltip

option = { title : { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip : { trigger: 'axis', formatter(params){ for(x in params){ return params[x].name +":"+params[x].data.value+"</br&.
复制链接

扫一扫

专栏目录