Echarts商业级数据图表的使用

最新推荐文章于 2021-08-22 15:31:38 发布

赶紧换个名

最新推荐文章于 2021-08-22 15:31:38 发布

阅读量311

点赞数

分类专栏： Echars图表以及fineReport报表

原文链接：https://www.cnblogs.com/undeceive/p/7782830.html

版权

Echars图表以及fineReport报表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts–必要文件导入

关键文件：

<script type="text/javascript" src="js/echarts.js"></script>

Echarts–图表示例

    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
	var option = {
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b} : {c} ({d}%)"
		},
		legend : {
			orient : 'vertical',
			x : 'left',
			data : [  ]
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'pie', 'funnel' ],
					option : {
						funnel : {
							x : '25%',
							width : '50%',
							funnelAlign : 'center',
							max : 1548
						}
					}
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		calculable : true,
		series : [ {
			name : '保养',
			type : 'pie',
			radius : [ '50%', '70%' ],
			itemStyle : {
				normal : {
					label : {
						show : false
					},
					labelLine : {
						show : false
					}
				},
				emphasis : {
					label : {
						show : true,
						position : 'center',
						textStyle : {
							fontSize : '30',
							fontWeight : 'bold'
						}
					}
				}
			},
			data : [ {
				value : byEnd,
				name : '已完成'
			}, {
				value : byNotEnd,
				name : '未完成'
			} ]
		} ]
	};
	 // 使用刚指定的配置项和数据显示图表
	myChart.setOption(option);



<body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 800px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '某站点用户访问来源',        //主标题文本
                    subtext: '纯属虚构',            //副标题文本
                    x: 'center'                    //标题水平安放位置
                },
               calculable: true,                    	 //是否启用拖拽重计算特性，默认关闭
                series: [{                               //数据内容
                	name: '访问来源',                	 //系列名称，如启用legend，该值将被legend.data索引相关
                    type: 'pie',                         //图表类型，必要参数！
                    radius: '55%',                       //半径
                    center: ['50%', '60%'],              //圆心坐标
                    data: [{                             //数据
                            value: 335,
                            name: '直接访问'
                        },
                        {
                            value: 310,
                            name: '邮件营销'
                        },
                        {
                            value: 234,
                            name: '联盟广告'
                        },
                        {
                            value: 135,
                            name: '视频广告'
                        },
                        {
                            value: 1548,
                            name: '搜索引擎'
                        }
                    ]
                }],
                tooltip: {                         //提示框，鼠标悬浮交互时的信息提示
                    trigger: 'item',               //触发类型，默认数据触发，可选值有item和axis
                    formatter: "{a} <br/>{b} : {c} ({d}%)",    //鼠标指上时显示的数据  a（系列名称），b（类目值），c（数值）, d（占总体的百分比）
                    backgroundColor: 'rgba(0,0,0,0.7)'    //提示背景颜色，默认为透明度为0.7的黑色

                },
                legend: {                                //图例，每个图表最多仅有一个图例。
                    orient: 'vertical',                    //布局方式，默认为水平布局，可选值有horizontal(竖直)和vertical(水平)
                    x: 'left',                            //图例水平安放位置，默认为全图居中。可选值有left、right、center
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                toolbox: {                                //工具箱，每个图表最多仅有一个工具箱。
                    show: true,                            //显示策略，可选为：true（显示） | false（隐藏）
                    feature: {                            //启用功能
                        mark: {                            //辅助线标志
                            show: true
                        },
                        dataView: {                        //数据视图
                            show: true,
                            readOnly: false                //readOnly 默认数据视图为只读，可指定readOnly为false打开编辑功能
                        },
                        restore: {                        //还原，复位原始图表   右上角有还原图标
                            show: true
                        },
                        saveAsImage: {                    //保存图片（IE8-不支持），默认保存类型为png，可以改为jpeg
                            show: true,
                            type:'jpeg',
                            title : '保存为图片'
                        }
                    }
                }
            };

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

赶紧换个名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts商业级数据图表的使用

Echarts–必要文件导入关键文件：<script type="text/javascript" src="js/echarts.js"></script>Echarts–图表示例 <div id="main" style="width: 800px;height:400px;"></div> <script typ...
复制链接

扫一扫

专栏目录