echarts-环形图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>echarts.js案例一</title><script type="text/javascript" src='lib/echarts/dist/echarts.js'></script>
</head>
<body><div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">// 初始化图表标签var myChart = echarts.init(document.getElementById('chart'));var placeHolderStyle = {normal: {label: {show: false,position: "center"},labelLine: {show: false},color: "#dedede",borderColor: "#dedede",borderWidth: 0},emphasis: {color: "#dedede",borderColor: "#dedede",borderWidth: 0}};var options = {backgroundColor: '#000',color: ['#fc7a26', 'green', '#ffa127', '#fff', "#ffcd26"],series: [{name: '值',type: 'pie',clockWise: true, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [199, 200],itemStyle: {normal: {label: {show: true,position: 'outside'},labelLine: {show: true,length: 100,smooth: 0.5},borderWidth: 5,shadowBlur: 40,borderColor: "#fc7a26",shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影}},data: [{value: 7,name: '70%'}, {value: 3,name: '',itemStyle: placeHolderStyle}]}, {name: '白',type: 'pie',clockWise: false,radius: [180, 180],hoverAnimation: false,data: [{value: 1}]}, {name: '值',type: 'pie',clockWise: true,hoverAnimation: false,radius: [159, 160],itemStyle: {normal: {label: {show: true},labelLine: {show: true,length: 100,smooth: 0.5},borderWidth: 5,shadowBlur: 40,borderColor: "#ffa127",shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影}},data: [{value: 6,name: '60%'}, {value: 4,name: '',itemStyle: placeHolderStyle}]}, {name: '白',type: 'pie',clockWise: false,hoverAnimation: false,radius: [140, 140],data: [{value: 1}]}, {name: '值',type: 'pie',clockWise: true,hoverAnimation: false,radius: [119, 120],itemStyle: {normal: {label: {show: true},labelLine: {show: true,length: 100,smooth: 0.5},borderWidth: 5,shadowBlur: 40,borderColor: "#ffcd26",shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影}},data: [{value: 4,name: '40%'}, {value: 6,name: '',itemStyle: placeHolderStyle}]}, {type: 'pie',color: ['#fc7a26', '#ffa127', "#ffcd26"],data: [{value: '',name: '不喜欢'}, {value: '',name: '喜欢'}, {value: '',name: '跳过'}]}, {name: '白',type: 'pie',clockWise: true,hoverAnimation: false,radius: [100, 100],label: {normal: {position: 'center'}},data: [{value: 1,label: {normal: {formatter: '投票人数',textStyle: {color: '#666666',fontSize: 26}}}}, {tooltip: {show: false},label: {normal: {formatter: '\n1200',textStyle: {color: '#666666',fontSize: 26}}}}]}]};myChart.setOption(options);
</script>
</html>
echarts-环形图相关推荐
- 修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
- Echarts环形图使用和设置(内外大小、颜色、指示线、圆圈中心字展示)
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用 首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
- echarts 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
- echarts 环形图 默认高亮展示某个数据
环形图默认高亮显示数据 代码: data(){return {chart:null,} }, methods: {initChart() {this.chart = this.$echarts.ini ...
- echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包 我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
- echarts环形图内实现自定义添加文字数字和缩放自适应
文章目录 需求场景 实现思路 全部代码示例 需求场景 在echarts的环形图里加上文字和数字并自适应.如下图: 实现思路 在series加上一层,只放文字和数字. 重点代码如下: // 就是这里! ...
- echarts环形图内部圆,外部圆形以及阴影设置
环形图 修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
- Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字 可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件 每个图形元素 ...
- echarts 环形图
Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
- Echarts环形图自定义图例
项目场景: 在展示图表的时候 有的时候需要图例也展示出一些内容来,例如这样子: 描述 普通的图例一般只是这样 但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter 解决方案: ...
最新文章
- 解决vue中对象属性改变视图不更新的问题
- PaintCode 教程1:动态绘制按钮
- SVN为什么比git更好
- MySQL(1)数据库介绍,配置MySQL的tab补全
- lightoj 1031 区间dp
- 一个判断session是否过期的小技巧
- 【5】dockerfile制作镜像
- C语言课后习题(24)
- 肖健雄的无人车公司AutoX,现在要在美国配送生鲜了
- 游戏筑基开发之测试篇2(C语言)
- inline,block 和 inline-block 的区别
- 计算机的分类按cpu芯片可以分为,按CPU芯片可分为单片机、单板机、多芯片机和多板机...
- jquery实现进度条
- 快速、准确使用EndNote插入参考文献
- 8086汇编段地址和偏移地址分配原则,深入理解.
- 工作态度决定了工作结果
- Windows2016 IKEv2(用户认证模式)
- 3D建模要学多久才能接外包私活?
- MySQL数据操作语言——插入语句、修改语句和删除语句
- 计算机网络(OSI、TCP/IP、网络协议、常见网络设备工作原理)