Echarts饼状图

<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js/esl.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
‘echarts‘ : ‘js/echarts‘,
‘echarts/chart/pie‘ : ‘js/echarts‘
}
});

// 使用
require(
[
‘echarts‘,
‘echarts/chart/pie‘ // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById(‘main‘));

option = {
title : {
text: ‘某站点用户访问来源‘,
subtext: ‘纯属虚构‘,
x:‘center‘
},
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},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:‘访问来源‘,
type:‘pie‘,
radius : ‘55%‘,
center: [‘50%‘, ‘60%‘],
data:[
{value:335, name:‘直接访问‘},
{value:310, name:‘邮件营销‘},
{value:234, name:‘联盟广告‘},
{value:135, name:‘视频广告‘},
{value:1548, name:‘搜索引擎‘}
]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

时间: 2024-10-18 06:55:01

Echarts饼状图的相关文章

echarts 饼状图调节 label和labelLine的位置

原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echartsjs.com/editor.html?c=x6VnXPfxlx echarts源码: option = { backgroundColor: "#03141c", title: { text: "84%", subtext: '完成部门占比', x: 'center'

vue+element+echarts饼状图+可折叠列表

html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> </div> <div id="tableDiv" style="width: 52%;float: left;"> <el-table :data="tableData" border row-key="

Echarts生成饼状图、条形图以及线形图 JS封装

1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Created by Administrator on 2015/8/7. */ var charec; // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 按需加载所需图表 r

ECharts学习(2)--饼状图之南丁格尔图

1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所以也不需要xAxis,yAxis. 2.itemStyle都会有normal和emphasis两个选项,normal选项是正常展示下的样式,emphasis是鼠标 hover 时候的高亮样式.也可以把阴影的效果设置在hover的时候. 3.背景色是全局的,所以直接在 option 下设置backgr

C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计

在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界面优美.由于客户是淘宝卖家,因此想要实现每个月全国各个省份各自购力如何,大家可以统计其他的,如果GDP 人口 等等. 百度echarts简介请参考 http://echarts.coding.io/doc/example.html 效果图如下:全部是动态数据 JS代码: <!-- Charts La

ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动

代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <!-- <script src="http://echarts.baidu.com/dist/echarts.min.j

图表echarts折线图,柱状图,饼状图

总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时候就改变icon的形状 legend: { data:[ { name:'访问次数', icon:'line' }, { name:'访', icon:'line' }, { name:'访问', icon:'line' }, ], textStyle:{ color:'#fff' }, right

【插件】ECharts---超级强大的图表插件使用(柱状图和饼状图及部分设置)

序言 最近一直在赶项目,遇到过很多问题,也找到了一些解决的方法,现在准备静下心来整理一下这段时间的成果,完善代码,把遇到的问题和解决方法记下来,备忘. 前几天做统计页面的时候,需求为对在线/离线人员统计,对不同类别统计,需要显示统计信息并能单击某一类别触发事件. 用到的插件当然是强大的echarts了.这里为官方文档案例,最全面的还是官方文档啦. html <!-- 统计表 --> <div class="chart" id="leaderchart&quo

php验证码+缩略图+饼状图+五环图

@1.验证码 1 captcher.php 2 header('Content-type:image/png'); 3 session_start(); 4 $img = imagecreate(100, 30); 5 $captcha = array( 6 'a', 'b', 'c', 'd', 'e', 'f', 7 'g', 'h', 'i', 'j', 'k', 'l', 8 'm', 'n', 'o', 'p', 'q', 'r', 9 's', 't', 'u', 'v', 'w',