一.引入JS文件,echarts.min.js
二.在body中创建div,这个div也就是用来显示的位置
<div id="main" style="width: 600px;height:400px;"></div>
三.写入js代码
<script type="text/javascript"> option = { title:{ text:'共XXX单', left:'center', top:'center', }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [ { name:'访问来源11', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: true, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, // 使用数据线 label:{ normal:{ formatter: '{b} 占{d}% \n 共{c}单' // 模板变量有 {a}, {b},{c}, {d},分别表示系列名,数据名,数据值,百分比。 } }, labelLine: { normal: { show: true, position: 'outside', } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; </script>
四.在div之后,再次写入js代码,用来引用
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); //异步加载数据 /* $.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] }); }); */ </script>
相关推荐
饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图...
JHChart更新版,添加了环状图,效果如上,github地址:https://github.com/China131/JHChart.git,喜欢的朋友可以start哦
使用poi在excel中生成各种常见的图像,比如饼状图(普通饼状图、三D图,环状体、折线图、柱状图、等~~)
图表统计,环状图显示,可以自定义修改颜色,文字,显示方式,多层环嵌套显示,可以同时显示多种数据
利用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等) 可以给初学者作为一个参考
Unreal Engine5 的纯UMG图表控件的插件(与ECharts效果相同),非WebBrowser、WebUI嵌套,纯C++及蓝图实现。包含曲线图、饼图、环状图、柱状图。
这是一款jquery环状轮播图插件。该环状轮播图插件采用响应式设计,可以在移动手机设备上运行。它基于CSS3 transform和 clip-path属性,IE浏览器不支持这个插件。
基于QWIDGET实现的自定义控件,环形饼状图,含代码和demo
Echarts 自动切换选中状态, 环状饼图内饼和外环同步切换,示例代码
图片3d资源效果
关于输入环状图形的三种方法,我找到了两种不同形式的思路,一种是以输出行数为标准,一种是以圈数为标准,各有优点,而且对编辑类似图形有启发.
*柱状图 column *区域图 area 高清显示 设置canvas的尺寸为2倍大小,然后缩小到50%,建议都进行这样的设置,图表本身绘制时是按照高清显示配置的,不然整体效果会偏大 /* 例如设计图尺寸为320 x 300 */ .canvas...
3d环形图可以用鼠标拖拽 把里面的事件改了可以在手机上拖拽
环形图上有多个区域,每个区域都有自己的说明,说明文字有线上和线下两种
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
环形图,前端jQuery插件,多种环形图。
一款基于JS+CSS3 3D立体环形百分比进度条图表动画特效,3D立体外观视觉效果非常好看,圆心显示百分比数据,一目了然。
echarts使圆形分割,点击2份,圆形就会被分割成2份,点击一百份,圆形就会被分割成一百等份
Excel自选图形的旋转和翻转.rar,旋转与翻转的各种效果图展示。