Echarts使用

最新推荐文章于 2023-09-17 16:30:00 发布

lrgeory

最新推荐文章于 2023-09-17 16:30:00 发布

阅读量290

点赞数

分类专栏： ———【web】文章标签： Echarts

本文链接：https://blog.csdn.net/wang18631061452/article/details/78668269

版权

———【web】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Echarts的简单实例。注意：如果用echarts做中国地图时，注意echart.js与map.china.js的引用顺序。注意二：JS代码必须写在div容器后

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="utf-8">  
        <title>ECharts</title>  
        <!-- 引入 echarts.js -->  
        
        <script src="../echarts.html/echarts.js"></script> 		
    </head>  
    <body>  
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
        <div id="main" style="width: 600px;height:400px;fontsize:'12';" > 
        <script type="text/javascript">  
            // 基于准备好的dom，初始化echarts实例  
            var myChart = echarts.init(document.getElementById('main')); 
			option = {
			title: {
				x: "center",
				top: 10,

			},
			tooltip: {
				formatter: "{a} <br/>{b} : {c}%"
			},
			series: [{
				name: '信用分',
				type: 'gauge',
				// startAngle: 180,
				// endAngle: 0,
				min:350,
				max:950,
				axisLine: {
					show: true,
					lineStyle: {
						width: 30,
						shadowBlur: 0,
						color: [[0.2, '#E43F3D'],[0.4, '#E98E2C'],[0.6, '#DDBD4D'],[0.8, '#7CBB55'],[1, '#9CD6CE']]
					}
				},
				axisTick: {
					show: true,
					splitNumber: 1
				},
				splitLine:{
					show: false,
				},
				axisLabel: {
					formatter: function(e) {
						switch (e + "") {
							case "410":
								return "较差";
							case "530":
								return "中等";
							case "650":
								return "良好";
							case "770":
								return "优秀";
							case "890":
								return "极好";
							default:
								return e;
						}
					},
					textStyle: {
						fontSize: 15,
						fontWeight: ""
					}
				},
				pointer: {
					show: false,
				},
				detail: {
					formatter: '{value}',
					offsetCenter: [0, -10],
					textStyle: {
						fontSize: 50
					}
				},
				data: [{
					name: "信用分",
					value: 720
				}]
			}]
		};
            // 使用刚指定的配置项和数据显示图表。  
            myChart.setOption(option);  
        </script>  
    </body>  
    </html>

实例下载链接