echarts中环形图加边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引入echarts文件-->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../theme/dark.js"></script>
<title>柱状图</title>
</head>
<body>
<!--准备一个dom容器-->
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip: {//提示框,可以在全局也可以在
show:false,
trigger: 'item', //提示框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color:'#000', //提示框的背景色
textStyle:{ //提示的字体样式
color:"black",
}
},
legend: { //图例
orient: 'vertical', //图例的布局,竖直 horizontal为水平
x: 'right',//图例显示在右边
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
textStyle:{ //图例文字的样式
color:'#333', //文字颜色
fontSize:12 //文字大小
}
},
series: [
{
name:'访问来源',
type:'pie', //环形图的type和饼图相同
radius: ['50%', '70%'],//饼图的半径,第一个为内半径,第二个为外半径
avoidLabelOverlap: false,
color:['#17acf6','#fff',],
label: {
normal: { //正常的样式
show: true,
position: 'left',
formatter: "{d}%",
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提示文字
labelLine: {
normal: {
show: false
}
},
itemStyle:{
show:false,
borderColor:'#17acf6',
borderWidth:1,
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/xy-milu/p/9640180.html
echarts中环形图加边框相关推荐
- echarts中的地图与Axure交互
1.将echarts中的地图嵌入Axure中实现可视化https://echarts.apache.org/examples/zh/editor.html?c=map-polygon. 2.将echa ...
- echarts之环形图
echarts中环形图就是饼图,区别在于是否定义了图形内部镂空的半径而已,就像下图: 那么现在有了一个圆环,中间如果空着的话就太难看了,所以给了如下的样式: 就是要给圆环中心添加内容.如果是单纯的添加 ...
- echarts中半圆的环形进度图形
echarts中半圆的环形进度图形 效果如图: 一.html代码如下: <div id="pieDiagram1" style="width:330px;heigh ...
- echarts 怎样去掉白色边框线 和怎样去除背景中的网格
echarts怎样去掉白色边框线: echarts怎样去除背景中的网格线 分类: JAVASCRIPT
- 【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
- echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
一.设置地图外边框 给地图添加外边框,同时地图中的区域添加细一点的边框.效果图如下: 这里涉及两种边框 ,分别在 geo 和 series 种设置 .主要代码如下: option = {backgr ...
- echarts 实现环形渐变
需求: 环形图是 echarts 中 pie 图的一个变种,echarts 官方对于 pie 图的颜色渐变只支持两种: linear 线性渐变 与 css 3 的 Linear Gradients 相 ...
- Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...
- echarts中toolbox位置_echarts toolBox工具栏
1.toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2.toolbox中的属性,不包含五个工具.里面最主要的就是feature这个, ...
- 从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
最新文章
- [转载]Using ngOptions In AngularJS
- 自整理IE6,IE7,IE8,Firefox兼容方案。。。
- 盘点上海AI行业的10岁、20岁和30岁们
- Nginx出现这么几个500怎么解决?
- 群晖nas怎么上传整个文件夹_你为什么需要一台NAS(第二期)
- 山东谋定富硒产业示范园-农业大健康·万祥军:国研功能农业
- c语言程序设计复习提纲,C语言程序设计复习提纲
- MYSQL问题解决方案:Access denied for user 'root'@'localhost' (using password:YES)
- SAP Spartacus HTTP请求的错误处理机制
- java压栈重复字符串_Java 实例 – 压栈出栈的方法实现字符串反转
- android的动态注册,Android JNI 函数注册的两种方式(静态注册/动态注册)
- 苹果搜索机器人因代理服务器配置不当泄漏内部 IP
- 算法基础:BFS和DFS的直观解释
- Myeclipse错误:Errors occurred during the build. 解决方法
- windowsxp安装python什么版本合适_XP系统安装Python,python
- 戴尔机架式服务器哪个型号好,戴尔_PowerEdge R540_机架式服务器参数_服务器推荐购买 | Dell 中国大陆...
- 最新微信开通状态过滤程序
- 2010.5.7 MFC中弹对话框以跟踪和程序运行中修改Static Text的Caption属性
- 深圳市社会医疗保险门诊大病管理办法
- Mininet--topo类型-py创建自定义拓扑网络
热门文章
- 小米平板2刷哪个系统更流畅_小米平板2刷lineage os与remix os及其体验
- div border合并
- 华为nova5iotg功能使用_华为nova3怎么使用OTG功能教程,华为nova3 OTG功能详解
- 一键seo提交收录_百度、360快速收录新上线网站技巧、方法
- 去痘痘、痘坑的五大误区
- 数据库设计——概念模型
- 统计推断—假设检验(hypothesis testing)
- 嵌入式Linux应用学习(一)------QT控制LED设备硬件
- 【MFC】解决窗口大小改变之后,ComboBox当前选项文字出现蓝色背景
- shopex mysql 数据库服务器_shopex数据库优化实例