原文地址:http://www.hxstrive.com/article/618.htm
关于EChart的用法这里不再赘述,直接上代码和效果图。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts3</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" id="../../page_favionc">
<script src="../../public/js/echarts3/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:550px;"></div>
<script type="text/javascript">
// 自定义颜色
var colors = ["red", "green", "blue", "orange", "greenyellow"];
// 颜色下标,每次渲染饼图一个扇区加一操作
var i = 0;
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
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:'搜索引擎'}
],
itemStyle: {
normal: {
// 设置饼图的颜色
color: function(){
return colors[i++];
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
</script>
</body>
</html>
相关推荐
ASP.NET 做的3D饼图。 可以2D、3D互转换。 具体代码自己可以看下,做适当的修改。 只是把代码贴出来了。
自定义双层嵌套饼图,里面一层饼图显示、外面罩着一层饼图显示,外加动画以及放大效果
android 饼图 饼图 饼图 自定义饼图
自定义饼图,饼图每一块区域颜色可以设置,可以被点击响应,饼图每一块的说明文字换行
继承QWIDGET实现的自定义饼图,效果跟echarts中的差不多
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ...
自己定义的一个饼图,半成品,主要实现了对饼图的一个点击事件
echarts 3d饼图资源
echart饼图-从控制层,展示层,以及js
最近在搞绘图方面的工作,说实话C++的第三方绘图库并不算多,有:qtcharts、ChartDirector、qwt、kdchart和QCustomPlot。这几个库各有利弊。在网上找了个实例,上传给大家共享。
echarts复合饼图(没有边线),堆叠柱状图,柱状图
vue实现echart饼图legend显示百分比的方法 本文主要介绍了vue使用echart的饼图数据部分展示百分比,分享给大家,具体如下: 效果图 实现源码 option = { title : { text: '某站点用户访问来源', subtext: '...
效果很好的2D饼图、2D柱状图、3D饼图、3D柱状图、3维2D折线图、3维2D柱状图、3维3D柱状图制作源码,操作简单,只要将js文件拷到项目中即可,适用于很多图形报表开发。
基于MPAndroidChart饼图添加指示线,标签颜色,让指示线颜色,标签颜色和饼图区块颜色一致.
本自定义饼状图是参考相关CSDN相关博客完成,并修改了其中的部分错误和添加了相关的父类方法重写,完成饼状图的位置、大小的自适应测量,你可以自己指定半径和大小,也可以指定为适应父控件或填充父控件,只要调用...
使用svg,js实现饼图的制作以及动画效果
一个关于饼图制作的demo,使用eCharts插件进行配置,根据数据的来源进行页面展示的图表文件
uni-app 引入echarts饼图,如果需要其他图形,原理一样,按需引入
VC2010下用QT编写的带阴影的3d效果饼图画法小程序,双击可移出饼角,可改变饼角的颜色。附件是源码及说明,可执行程序请自行编译。
ECharts多行文字两端对齐 - 饼图