zoukankan      html  css  js  c++  java
  • Echarts 柱状图上方显示值

    使用官网的例子,只不过加了itemStyle属性

    <!DOCTYPE html>
     
    <head>
    	<meta charset="utf-8">
    	<title>ECharts</title>
    </head>
     
    <body>
    	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    	<div id="main" style="900px;height:300px"></div>
    	<!-- ECharts单文件引入 -->
    	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    	<script type="text/javascript">
    		// 路径配置
    		require.config({
    			paths: {
    				echarts: 'http://echarts.baidu.com/build/dist'
    			}
    		});
     
    		// 使用
    		require(
    			[
    				'echarts',
    				'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
    			],
    			function(ec) {
    				// 基于准备好的dom,初始化echarts图表
    				var myChart = ec.init(document.getElementById('main'));
     
    				var option = {
    					tooltip: {
    						show: true
    					},
    					legend: {
    						data: ['销量']
    					},
    					xAxis: [{
    						type: 'category',
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					}],
    					yAxis: [{
    						type: 'value'
    					}],
    					series: [{
    						"name": "销量",
    						"type": "bar",
    						"data": [5, 20, 40, 10, 10, 20],
    						itemStyle: {
    							normal: {
    								label: {
    									show: true,  //开启显示
    									position: 'top',  //在上方显示
    									textStyle: {  //数值样式
    										color: 'black',
    										fontSize: 16
    									}
    								}
    							}
    						},
    					}]
    				};
     
    				// 为echarts对象加载数据 
    				myChart.setOption(option);
    			}
    		);
    	</script>
     
    </body>

     

    显示的效果如下
    在这里插入图片描述

  • 相关阅读:
    json.stringify()和json.parse()
    C# 对json对象嵌套数组
    sql 时间段内没有的数据等于0
    epoint:TreeView
    Asp.Net使用org.in2bits.MyXls.dll操作excel的应用
    VS中的生成事件
    mysql主从复制
    mysql索引优化分析
    MySQL逻辑架构简介
    大数据DMP画像系统(转载 简介-龙果学院)
  • 原文地址:https://www.cnblogs.com/net-sky/p/13731882.html
Copyright © 2011-2022 走看看