let currName = "";

let myChart= echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);

myChart.on(‘mouseover‘, (params) =>{

currName=params.name;

console.log(params)

let op=myChart.getOption();

let _label={

normal:{

show:true,

position:‘center‘,

formatter: [

`{a|${params.name}}`,

`{b|${params.percent + "%"}}`

].join(‘\n‘),

rich: {

a: {

color:‘#fff‘,

fontSize:18,

lineHeight:30},

b: {

color:‘blue‘,

fontSize:20,

foneWeight:‘bold‘,

},

}

}

}if(params.seriesIndex === 1){

_label.normal.formatter= [‘zhiliang‘].join(‘\n‘)

}

op.series[0].label =_label;

myChart.setOption(op,true)

})

option={

tooltip: {

trigger:‘item‘,

formatter:‘{a}
{b}: {c} ({d}%)‘},

legend: {

orient:‘vertical‘,

right:10,

top:20,

bottom:20,

data: [‘直接访问‘, ‘邮件营销‘, ‘联盟广告‘, ‘视频广告‘, ‘搜索引擎‘]

},

color : [‘red‘, ‘orange‘, ‘yellow‘, ‘green‘, ‘blue‘, ‘indigo‘, ‘purple‘],

series: [

{

name:‘访问来源‘,

type:‘pie‘,

radius: [‘50%‘, ‘70%‘],

avoidLabelOverlap:false,

label: {

normal:{

show:true,

position:‘center‘,

formatter: [‘zhiliang‘].join(‘\n‘),

rich: {

a: {

color:‘#fff‘,

fontSize:18,

lineHeight:30},

b: {

color:‘yellow‘,

fontSize:20,

foneWeight:‘bold‘,

textShadowBlur:20,

textShadowColor:‘yellow‘},

}

}

},

labelLine: {

normal: {

show:false}

},

data: [

{value:335, name: ‘直接访问‘,color:"#cccccc"},

{value:310, name: ‘邮件营销‘},

{value:234, name: ‘联盟广告‘},

{value:135, name: ‘视频广告‘},

{value:1548, name: ‘搜索引擎‘}

]

},

{

name:‘边框1‘,

type:‘pie‘,

hoverAnimation:false,

radius:[‘75%‘, ‘75%‘],

labelLine:{

normal:{

show:false}

},

itemStyle:{

normal:{

borderWidth:1,

borderColor:"#ffffff",

opacity:0}

},

data: [

{

value:100,

tooltip:{

show:false}

}

]

},

]

};

HTML饼状图中心添加文字,echarts饼状图环形中间动态文字相关推荐

  1. echarts饼状图环形中间动态文字

    上代码 <template><div class="circle-wrapper"><div class="circle-title&quo ...

  2. echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图

    先贴一张效果图 1.导包 我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...

  3. JS Echarts之雷达图 | 使用Excel画雷达图

    文章目录 第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改 修改in ...

  4. R语言ggplot2可视化图中添加希腊字母实战

    R语言ggplot2可视化图中添加希腊字母实战 目录 R语言ggplot2可视化图中添加希腊字母实战 #ggplot2可视化图中添加希腊字母1

  5. Matlab:向图中添加注释

    Matlab:向图中添加注释 创建简单的图 圆圈注释 文本箭头注释 注释是添加到图中的额外信息,用来帮助标识一些重要信息.此示例首先解释不同类型的注释,然后说明如何向图中添加圆圈和文本箭头. #注释的 ...

  6. 1.Echarts饼状图详解及示例

    前言说明:因工作需要用到图统计数据作为展示,用到echarts3(你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件) ...

  7. vue+elementui+echarts饼状图内部显示百分比

    <!--饼状图--><div id="main" style="width: 400px;height: 350px;"></di ...

  8. Angular2组件与Echarts饼状图交互之饼图制作

    一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...

  9. ECharts饼状图lable显示Value所占百分比

    ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比 简单的实现可以参考: export default {data() {return {}},mounte ...

最新文章

  1. 过河 2005年NOIP全国联赛提高组(离散化+dp)
  2. Linux复习(六)
  3. Oracle最新的Java 8更新破坏了您的工具-它是如何发生的?
  4. 【渝粤教育】国家开放大学2018年秋季 0633-21T化工CAD 参考试题
  5. Android 编程下 ListView 和 CheckBox 混合使用时的常见问题
  6. 如何实现:GridView 控件中显示的文本不自动换行,隐藏超出宽度部分wj-wangjun
  7. java基于ssm人体健康体检信息管理系统-springboot
  8. 大数据可视化(一)数据可视化概述
  9. 学习日志之synthesis and optimization(7)——Heuristic optimization
  10. vs2008设置选中 高亮
  11. 红米、小米 开发者选项
  12. 抱薪者说 | 从零开始 ,社区年会诞生记
  13. 2020/5/4/ 每日一咕
  14. 设计模式之代理模式之静态代理
  15. Redis 之BIO与RIO
  16. 第十二章:synchronized与锁升级
  17. 沭阳学爬虫01HTTP基本原理
  18. 好诗好词PARKER SCP01-100-24-07苏轼
  19. 重装系统 linux u盘启动不了怎么办,用U盘启动盘重装系统启动时黑屏
  20. 使用Mitmproxy工具进行小姐姐图片(不管什么网站,只要是.jpg格式的图片都可自动下载)的批量下载

热门文章

  1. 08服务器许可证安装向导,08_安装部署GRID许可证服务器.pdf
  2. vs未能找到程序集platform.winmd_PP体育直播大连人VS恒大:新老8冠王首尾对决竟有十大看点...
  3. BugkuCTF-WEB题bp
  4. java 不支持fork,grails不能运行fork模式解决方法
  5. mysql jdbc 单利_java单利模式设计
  6. linux非阻塞等待线程,linux – 即使异步I / O操作挂起,只有线程处理io_service正在等待...
  7. python网络库_python的网络库
  8. Linux能适应不同的指令集,(转)linux常用指令集
  9. 腾达路由器dns服务器未响应,腾达路由器的设置方法
  10. Oracle中表连接的方式有哪些