在echarts中圆环图中间自定义图片引入

首先打开echarts官网实例

https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut

其次复制代码

app.title = '环形图';option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},graphic: {elements: [{type: 'image',style: {image: "https://yp.a-hh.cn/zhjk/img.jpg",width: 25,height: 30},left: 'center',top: '70'},{type: 'text',left: 'center', // 相对父元素居中top: '110',  // 相对父元素上下的位置style: {fill: '#333333',text: ['总人数'],font: '12px Arial Normal',}}]},legend: {orient: 'vertical',x: 'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]
};

其实就是在option graphic属性中添加属性在elements 第一个对象中修改引入图片的位置

在echarts中圆环图中间自定义图片引入相关推荐

Vue 中 Echarts绘图在一个圆环图或多个圆环图中间插入图片插入文字（考虑到浏览器大小兼容问题）
之前一直掉进这个坑,没有跳出来,导致自己在这个问题上搞了很久,今天把这个坑写出来,避免大家都去踩这个坑啊~ 在Vue项目结构中,如果引入图片的url不成功,记住,请一定要试一试在路径外加上 requi ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
ECharts 示例——圆环图：数据标签详细设置
当前ECharts版本为5.1.2. 概述按照其他可视化工具中圆环图的默认样式,对ECharts圆环图进行如下设置: 标题:设置标题位于圆环中央,修改标题字体大小和颜色数据标签:修改字体大小.样式 ...
Echarts中太阳图（Sunburst）的实例
Echarts中太阳图(Sunburst)的实例目前在项目中要实现一个Echars中的太阳图,但是Echars中的太阳图的数据格式是一个树形结构,如下代码格式如下: var mapData = [{ ...
echarts热力背景图_echarts自定义背景图片
//使用canvas把背景添加到echarts里 var img = new Image(); var canvas = document.createElement('canvas'); var c ...
HTML中视频默认显示自定义图片
用特定的图片给视频做封面方法一在HTML代码中直接添加poster属性代码如下: //html代码,需要在video标签中加入poster属性,把封面图的路径加上 <video id=&q ...
使用Echarts实现圆环图
实现如图效果: 首先先在 HTML 中定义有宽度和高度的父容器,图表的大小默认即为该节点的大小 <div class="pieChart" id="pieChart ...
echarts中蜡烛图按需加载
1.下载依赖 npm i echarts --save 2.main.js中引入 //引入基本模板 let echarts = require('echarts/lib/echarts')Vue.pr ...
echarts饼图圆环图数据为0时字体重叠
在echarts图标中有时候会出现数据过小字体重叠的问题, 解决方法,可将series中的avoidLabelOverlap属性值设置为true即可解决

在echarts中圆环图中间自定义图片引入

在echarts中圆环图中间自定义图片引入相关推荐

最新文章

热门文章

在echarts中圆环图中间 自定义图片引入

在echarts中圆环图中间 自定义图片引入相关推荐

最新文章

热门文章

在echarts中圆环图中间自定义图片引入

在echarts中圆环图中间自定义图片引入相关推荐