数据可视化复习-1

最新推荐文章于 2024-06-07 01:58:54 发布

饭饭童鞋

最新推荐文章于 2024-06-07 01:58:54 发布

阅读量257

点赞数

分类专栏：数据可视化文章标签：数据可视化

本文链接：https://blog.csdn.net/continuing1234/article/details/118165076

版权

数据可视化专栏收录该内容

10 篇文章 5 订阅

订阅专栏

echarts基本代码复习

<html>
<head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div style="width: 600px;height:400px;"></div>
    <script >
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector("div"));
		var xdata= ["张三","李四","王五","闰土","小明","茅台","二妞","大强"];
		var ydata= [99, 20, 36, 10, 10, 20,45,67];
        // 指定图表的配置项和数据
        var option = {
			title:{
				text:'成绩显示',
				textStyle:{
					color:'red'
				},
				borderWidth:5,
				borderColor:'blue',
				borderRadius:20,
				left:250
			},
            //纵向
			xAxis:{
				type:'category',
				data:xdata
			},
			yAxis:{
				type:'value'
			},
			// //横向
			// xAxis:{
			// 	type:'value'
			// },
			// yAxis{
			// 	type:'category',
			// 	data:xdata
			// },
            series: [{
                name: '语文',
                type: 'bar',
				markPoint:{
					data:[
						{
							type:'max',name:'最大值'
						},
						{
							type:'min',name:'最小值'
						}
					]
				},
				markLine:{
					data:[
						{
							type:'average',name:'平均值'
						}
					]
				},
				label:{
					show:true,
					rotate:60  //旋转
				},
				barWidth:'30%',  //柱宽度
				
                data: ydata
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

echarts运行效果

饭饭童鞋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
数据可视化复习-1

echarts基本代码复习<html><head> <meta charset="utf-8"> <title>柱状图</title>  <script src="echarts.min.js"></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的
复制链接

扫一扫

专栏目录