首页 > 其他分享 >echart图的两边分布图例

echart图的两边分布图例

时间:2024-11-18 11:22:33浏览次数:1  
标签:right center vertical echart value 图例 分布图 两边 left

·


function init2() {

   var myChart = echarts.init(echart2.value)
   let sum = 0;
   for (let item of chartData.value) {
       sum += item.value;
   }
   var option = {
       title: {
           // text: "{a|总数}" + "\n{c|" + sum + "}",
           // x: "center",
           // y: "center",
           // textStyle: {
           //     rich: {
           //         a: {
           //             fontSize: 14,
           //             color: "#5e5e5e",
           //         },
           //         c: {
           //             fontSize: 14,
           //             color: "#5e5e5e",
           //             padding: [10, 0],
           //         },
           //     },
           // },
           text: '新兵需求占比图',
           top:'0%',
           left:'center'
       },
       color: ["#85acfb","#cfdffd","#85e2bd","#daf6eb","#8795ae","#dbdfe6","#f8ce52","#fdf0cb","#9488fb","#d5d0fd","#93d6f1","#def2fb","#b088cb",],
       tooltip: {
           trigger: "item",
           formatter: "{b} : {c}%",
       },
       toolbox: {
           show: true,
       },
       legend: [
           {
               x: 'left',
               orient: 'vertical',
               left:'10%',
               data: [],
               top: "center", //水平位置,【left\center\right\数字】
               align: "left", //字在图例的左边或右边【left/right】
               orient: "vertical", //图例方向【horizontal/vertical】
               icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
               textStyle: {
                   color: "#8C8C8C",
               },
           },
           {
               top: "center", //水平位置,【left\center\right\数字】
               left:'85%',
               align: "right", //字在图例的左边或右边【left/right】
               orient: "vertical", //图例方向【horizontal/vertical】
               icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
               textStyle: {
                   color: "#8C8C8C",
               },
               x: 'right',
               orient: 'vertical',
               data: [],
           },
       ],
       series: [
           {
               type: "pie",
               radius: ["20%", "40%"],
               label: {
                   normal: {
                       show: true,
                       formatter: "{b}",
                   },
                   emphasis: {
                       show: true,
                   },
               },
               data: chartData.value,
           },
       ],
   };
   option.legend[0].data = chartData.value.slice(0, chartData.value.length/2)
   option.legend[1].data = chartData.value.slice(-(chartData.value.length / 2))
   myChart.setOption(option);
   window.addEventListener('resize', () => {
       myChart.resize();
   })
}

标签:right,center,vertical,echart,value,图例,分布图,两边,left
From: https://www.cnblogs.com/baozhengrui/p/18552137

相关文章

  • ECharts饼图-饼图33,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个饼图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览二、视频......
  • echarts 画一个南丁格尔玫瑰饼图
    constdatas=[{name:'无信号',value:5,label:{color:'#06B7FFFF'}},{name:'正常',value:8,label:{color:'#69D85DFF'}},{name:......
  • echart 环图
    option={tooltip:{trigger:'item'},legend:{type:'scroll',icon:'circle',orient:'vertical',left:'42%',itemGap:8,top:'middle',itemHeight:20,tooltip:{show:true},formatter......
  • 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‌是......