echarts 圆环图中间插图或文字

话不多说，直接上代码：

option ={

tooltip: {

trigger: 'item' // 鼠标悬浮显示

// legend: { // 图例

// top: '5%',

// left: 'center'

// },

graphic: [

{

type: 'image', // 插入圆环中间的图片

style: {

image: require('./echartBg.png'), // 本地图片要用require引入

width: 76, // 设置图片大小

height: 76

// 设置图片位置

left: 'center',

top: '20%'

{ //环形图中间添加文字

type: 'text', //通过不同top值可以设置上下显示

left: 'center',

top: '38%',

style: {

text: '85%',

textAlign: 'center',

fill: '#f8f8f8', //文字的颜色

width: 30,

height: 30,

fontSize: 16,

fontFamily: "Microsoft YaHei"

}

// 写了两个文字插入是因为业务要求两行不一样样式的字

{ //环形图中间添加文字

type: 'text', //通过不同top值可以设置上下显示

left: 'center',

top: '53%',

style: {

text: '互认率',

textAlign: 'center',

fill: '#fff', //文字的颜色

width: 30,

height: 30,

fontSize: 12,

fontFamily: "" // 这个自己看着办

}

color: ['#15B1FA', '#F0F3F6'], // 圆环的颜色组

series: [

{

name: 'Access From',

type: 'pie',

radius: ['60%', '80%'],

// avoidLabelOverlap: false,

itemStyle: {

borderRadius: 10,

borderColor: '#fff',

borderWidth: 2

label: {

show: false,

position: 'center'

labelLine: {

show: false

data: this.chartData

}

]

}

// 兄弟姐们好使的话，支持一下，谢谢

// 下边是我的本地数据

chartData: [

{ value: 15, name: 'Search Engine' },

{ value: 85, name: 'Direct' },

echarts 圆环图中间插图或文字相关推荐

修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
ECharts圆环图
想要使用该图表,只需要复制以下代码,再下载 echarts.js 在页面文件中引入即可. echarts.js 下载链接: http://echarts.baidu.com/download.html ...
ECharts圆环图(详细示例——满满的注释)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>圆环图 ...
uniapp中封装echarts圆环图
①安装插件市场的echarts图表插件 https://ext.dcloud.net.cn/plugin?id=4899 ②安装后需安装echarts相关依赖: npm install echarts ...
echarts 圆环图
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 1.问题 ...
绘图杂记【10】echarts 圆环图+图片
最终图片图片剪切为圆形图片 https://www.yasuotu.com/editor 或者 http://www.celerstar.com/ProduceDisplay/LogoCreate ...
ECharts 示例——圆环图：数据标签详细设置
当前ECharts版本为5.1.2. 概述按照其他可视化工具中圆环图的默认样式,对ECharts圆环图进行如下设置: 标题:设置标题位于圆环中央,修改标题字体大小和颜色数据标签:修改字体大小.样式 ...
Vue 中 Echarts绘图在一个圆环图或多个圆环图中间插入图片插入文字（考虑到浏览器大小兼容问题）
之前一直掉进这个坑,没有跳出来,导致自己在这个问题上搞了很久,今天把这个坑写出来,避免大家都去踩这个坑啊~ 在Vue项目结构中,如果引入图片的url不成功,记住,请一定要试一试在路径外加上 requi ...

echarts 圆环图中间插图或文字

echarts 圆环图中间插图或文字相关推荐

最新文章

热门文章