首页 > 其他分享 >echart 环图

echart 环图

时间:2024-11-15 13:57:31浏览次数:1  
标签:echart show value 环图 fontSize 90% percentage name

option = {
tooltip: {
trigger: 'item'
},

legend: {
type: 'scroll',
icon: 'circle',
orient: 'vertical',
left: '42%',
itemGap: 8,
top: 'middle',
itemHeight: 20,
tooltip: { show: true },

formatter: function(data) {
console.log(data)
// 自定义格式化函数
return `{name| 1111}{value| 2222}{percentage| 33%}`
},
textStyle: {
color: '#000',
rich: {
name: {
verticalAlign: 'right',
align: 'left',
width: 140,
fontSize: 14
},
value: {
align: 'left',
width: 140,
fontSize: 14
},
percentage: {
fontSize: 14,
color: '#00cf90'
}
}
}
},
series: [
{
name: 'Access From',
type: 'pie',
center: ['20%', '46%'],
radius: ['50%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine', percentage: '90%' },
{ value: 735, name: 'Direct', percentage: '90%' },
{ value: 580, name: 'Email', percentage: '90%' },
{ value: 484, name: 'Union Ads', percentage: '90%' },
{ value: 300, name: 'Video Ads', percentage: '90%' }
]
}
]
};

标签:echart,show,value,环图,fontSize,90%,percentage,name
From: https://www.cnblogs.com/yuwen1995/p/18547850

相关文章

  • echart图的圆环
    constecharts7=ref(null);functioninit(){varmyEchart=echarts.init(echarts7.value)letnameList=Object.keys(serisesData.value)letvalueList=Object.values(serisesData.value)letcolorList=['#FAAD14','#13C2C2......
  • echarts 饼图在中间显示百分比
    echarts饼图在中间显示百分比,使用graphicsetEchartOption(val){constseriesData=[{value:1048,name:'完成值'},{value:735,name:'目标值'}]constoption={grid:{containLabel:true},......
  • echarts自定义tooltip
    tooltip配置tooltip:{show:true,trigger:'axis',formatter:params=>{letresult=`<div>${params[0].axisValue}</div>`params.forEach(item=>{if(......
  • echart柱子太短无法点击问题
    在做echarts柱图的时候,有时候可能会有下转或者一些点击功能,一般会使用myChart.on('click',function(){//执行代码})去实现功能,但是,有的时候,会出现某个柱子数据太少,可能会点不到,这是可以使用myChart.getZr().on('click',function(){})去代替之前的点击事件,如下:myChart.getZr(......
  • ECharts饼图-饼图9,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个饼图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览 二、视......
  • Django电影推荐系统 豆瓣电影 协同过滤推荐算法 Echarts可视化 爬虫 机器学习 大数据
    博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久,选择我们就是选择放心、选择安心毕业✌>......
  • 一篇帮你搞懂ECharts图表构建
    目录一、引入 主要功能和应用场景:完全版本:二、一个实例 1.大框架2.设置大标题3.设置提示标签4.设置每个柱形数据的背景颜色5.设置柱形数据背景边框6.设置图例小角标7.拖拽手柄8.设置X轴9.设置Y轴10.设置数据11.设置边框完整版本:一、引入 ‌ECharts‌是......
  • echarts柱状图轮播图-自动滚动首尾相连-固定Y轴标签宽度-鼠标悬浮停止自动轮播-可上下
     1.调接口获取数据functiongetProducChart(){constHTMLElement=document.getElementById(`paiming_chart`)asHTMLElement;constmyChart=echarts.init(HTMLElement);//虚拟数据constx:any=["1周一","2周二","3周三"......
  • echart预测图
    functioninit2(){constmyChart=echarts.init(echart2.value)letdata=[{name:'2020',value:480,},{name:'2021',value:170,},{name:'2022',value:200,},{name:'2023',value:105,},......
  • 数据可视化——Apache ECharts实现
    目录1、什么是ECharts     2、官网入口3.工具准备 4.插入html文件5.小例子1、什么是ECharts             ECharts(EnterpriseCharts,商业级数据图表)是一个使用JavaScript实现的开源可视化库,能够流畅地运行在PC和移动设备上,兼容当前绝大部分浏......