echarts环形图加边框

先看实现效果

核心代码

itemStyle:{show:false,borderColor:'#17acf6',borderWidth:1,},

完整代码

<!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，初始化echartsvar 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 环形图占比_环形图_仪表盘
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
echarts 中国地图加自定义图标
echarts 中国地图加自定义图标导入js <script src="/ajax/libs/report/echarts/echarts-all.js"></ ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...
echarts 环形进度图
#echarts 环形进度图 #效果图 #上代码 data = [{name: '发票管理',value: 360,},{name: '纳税申报',value: 252,},{name: '综合服务' ...
echarts环形图内部圆，外部圆形以及阴影设置
环形图修改图例自定义icon 完整代码图 Chart1() { // 折算价值户新增构成let chartDom = document.getElementById('main');let myCh ...
echarts 环形图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts label加边框_玩转ECharts之实现“动态颜色的Label”
前言玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些&qu ...
echarts label加边框_关于echarts的lines中的label的设置 -问答-阿里云开发者社区-阿里云...
附上代码,为啥lines里的label设置了,但是无效呢???求大神解释,么么哒~ lines测试 var dom = document.getElementById("main" ...
echarts 环形图默认高亮展示某个数据
环形图默认高亮显示数据代码: data(){return {chart:null,} }, methods: {initChart() {this.chart = this.$echarts.ini ...

echarts环形图加边框

echarts环形图加边框相关推荐

最新文章

热门文章