首页 > 其他分享 >Echarts设置饼状图保证你看的明明白白

Echarts设置饼状图保证你看的明明白白

时间:2024-05-11 09:20:29浏览次数:23  
标签:false show color 标签 明明白白 设置 仪表盘 Echarts 状图

简单的饼状图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts-动画</title>
  <script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
</head>
<div style="width: 780px;height: 400px;" id="box"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector('#box'))
  // 第一个颜色是从正上方开始的
  let option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        center: ['40%', '50%'], // 饼状图的位置
        /**
         * radius:饼状图的大小
         * 它是一个数组,第1个值表示里面的圆的大小
         * 第2个值表示外面的圆的大小
         * */ 
        radius: ['45%', '60%'], 
        data: [
          { value: 1048, name: '名称1' },
          { value: 735, name: '名称2' },
          { value: 580, name: '名称3' },
          { value: 484, name: '名称4' },
          { value: 300, name: '名称5' }
        ]
      }
    ]
  }
  myChart.setOption(option);
</script>

</html>

给饼状图设置渐变色

...其他配置,
data:[ 相关数据],
itemStyle: {
  normal: {
    label: {
      padding: [0, 0],
      alignTo: 'labelLine'
    },
    color: (list) => {
      let colorList = [
      {  
        "colorStart": "#FF9800",  
        "colorEnd": "#FFD180"  
      },  
      {  
        "colorStart": "#673AB7",  
        "colorEnd": "#9575CD"  
      },
      {  
        "colorStart": "#0F9D58",  
        "colorEnd": "#4CAF50"  
      }, 
      {  
        "colorStart": "#00BCD4",  
        "colorEnd": "#64FFDA"  
      },
      {  
        "colorStart": "#E91E63",  
        "colorEnd": "#FF80AB"  
      },
      ]
      return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
        {
          //左、下、右、上
          offset: 0,
          color: colorList[list.dataIndex]["colorStart"],
        },
        {
          offset: 1,
          color: colorList[list.dataIndex]["colorEnd"],
        },
      ]);
    }
  }
},

给饼状图外围配置一条虚线

{ //最外部细虚线
  // 类型是仪表盘
  type: 'gauge',
  // 位置必须和饼状图的一样,否者设置出来会有偏差
  center: ['40%', '50%'],
  /**
    * startAngle:仪表盘起始角度。
    * 圆心正右手侧为0度,正上方为90度,正左手侧为180度。
    * 就是说:逆时针
    * */
  startAngle: 270,
  // endAngle:仪表盘结束角度。最初值是:-89.9999,
  endAngle: -90,
  // 设置虚线的大小
  radius: '75%',
  // 不要显示刻度,因为仪表盘式有刻度样式的;我们这里只要圆,不要刻度
  // 如果设置为 show: true,就会显示刻度样式
  axisTick: {
    show: false
  },
  // false 不显示标签
  axisLabel: {
    show: false
  },
  // 仪表盘刻度的分割段数,这里表现是外层虚线之间的间距
  // splitNumber: 65 更加直接的表现是外层有65段虚线
  splitNumber: 65,
  axisLine: {
    // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
    show: false,
    // lineStyle:仪表盘轴线样式。
    // lineStyle: {
    //   // 仪表盘的轴线可以被分成不同颜色的多段,我们这里始终是同一个颜色 [1, '#E5E6E8']
    //   color: [
    //   [0.1, 'red'], // 0~10% 红轴
    //   [0.2, 'green'], // 10~20% 绿轴
    //   [0.3, 'blue'], // 20~30% 蓝轴
    //   ],
    //   width: 10
    // }
  },
  // 分隔线样式。
  splitLine: {
    show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
    length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
    lineStyle: {
      width: 10, // 分隔线线长。支持相对半径的百分比。
      color: '#E5E6E8', // 线的颜色
    }
  },
  // 仪表盘详情,用于显示数据。
  detail: {
    show: false
  },
},

视觉引导线配置

...其他配置,
data:[ 相关数据],
// 标签的视觉引导线配置
labelLine: {
  show: true, // 是否显示视觉引导线
  length: 20, // 视觉引导线第一段的长度。 
  length2: 40,  // 视觉引导项第二段的长度。 
  lineStyle: {
    color: '#E5E6E8', // 这里设置扇线颜色为灰色
    width: 1, // 线段宽度  
    type: 'solid', // 线段类型,默认为实线 
  }
},


为什么hover的时候视觉引导线发生了变化?

我看官网都不会发生变化.
是与版本有关还是配置项有关

hover时视觉引导线和对应的名称样式不发生改变

...其他配置,
data:[ 相关数据],
 // 高亮状态的扇区和标签样式 设置饼图外围虚线
emphasis: {
  // 这里设置悬停时引导线对应名称的颜色,与非悬停时保持一致
  label: {
      color: '#333333' 
  },
  labelLine: {
    // 这里设置悬停时引导线的颜色,与非悬停时保持一致
    lineStyle: {
        color: '#E5E6E8' 
    }
  }
}

可以自定义富文本样式

...其他配置,
data:[ 相关数据],
 // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
  label: {
    show: true,
    // 标签的位置。
    position: 'outside',
    normal: {
      textStyle: {
        color: '#333333' // 设置引导线外层文字描述的颜色
      },
      // 字符串模板 模板变量有:
      // {a}:系列名。
      // {b}:数据名。
      // {c}:数据值。
      // {d}:百分比。
      formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
      padding: [0, -40], // 设置标签距离引导线水平方向的距离
      rich: {
        aisB1: {
          color: '#333333',
          //这里还有其他属性;大家可以去查看
        },
        aisC1:{
          color: '#333333',
        },
        aisD1: {
          color: '#333333', // 这是数据值的颜色
        },
      }
    }
  },

名称在引导线的上方-使用\n

因为是使用的是4.9的版本;
所以设置名称在引导线的上方使用了一点技巧;
那就是换行符 \n
formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}\n\n',

名称在引导线的上方-使用labelLayout 需要再5.0以上版本

...其他配置,
data:[ 相关数据],
// 从 v5.0.0 开始支持
labelLayout:{
  // 标签垂直对齐方式,可以设置'top', 'middle', 'bottom'。
  verticalAlign:'bottom',
  // 标签在 y 方向上的像素偏移,设置标签在引导线的上方
  dy:-4
},

饼状图中间配置一个阴影圆

// 配置里面的圆
  {
  type: 'gauge',
  center: ['40%', '50%'], // 饼状图的位置
  radius: '35%',
  // 如何是版本是4 这里是359.999;不能是360;否则圆环不能正常显示
  // 如果是版本是5,这里可以是360
  startAngle: 359.999,
  endAngle: 0,
  splitNumber: 4,
  zlevel: 10,
  axisLine: { // 坐标轴线
    lineStyle: { // 属性lineStyle控制线条样式
      color: [
        [1, '#fff']
      ],
      width: '100%',
      shadowColor: '#CDCDCD', //背景阴影颜色
      shadowOffsetX: 0, // X偏移量
      shadowOffsetY: 0, // Y偏移量
      shadowBlur: 10, // 模糊范围
    }
  },
  splitLine: { //分隔线样式
    show: false,
  },
  axisLabel: { //刻度标签
    show: false,
  },
  axisTick: { //刻度样式
    show: false,
  },
  detail: {
    show: false,
  },
  //仪表盘指针。
  pointer: {
    // 不显示仪表盘中的指针
    show: false,
  },
  title: {
    // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。
    // 可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
    offsetCenter: ['0%', "0%"],
    color: '#999999',
  },
  data: [{
    name: "2024-05-09\n15:36:25",
  }]
},

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts-动画</title>
  <script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
  <!-- <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.js"></script> -->
</head>
<div style="width: 780px;height: 400px;" id="box"></div>
</body>
<script>
  let myChart = echarts.init(document.querySelector('#box'))
  // 第一个颜色是从正上方开始的
  let option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      { //最外部细虚线
        // 类型是仪表盘
        type: 'gauge',
        // 位置必须和饼状图的一样,否者设置出来会有偏差
        center: ['40%', '50%'],
        /**
         * startAngle:仪表盘起始角度。
         * 圆心正右手侧为0度,正上方为90度,正左手侧为180度。
         * 就是说:逆时针
         * */
        startAngle: 270,
        // endAngle:仪表盘结束角度。最初值是:-89.9999,
        endAngle: -90,
        // 设置虚线的大小
        radius: '75%',
        // 不要显示刻度,因为仪表盘式有刻度样式的;我们这里只要圆,不要刻度
        // 如果设置为 show: true,就会显示刻度样式
        axisTick: {
          show: false
        },
        // false 不显示标签
        axisLabel: {
          show: false
        },
        // 仪表盘刻度的分割段数,这里表现是外层虚线之间的间距
        // splitNumber: 65 更加直接的表现是外层有65段虚线
        splitNumber: 65,
        axisLine: {
          // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
          show: false,
          // lineStyle:仪表盘轴线样式。
          // lineStyle: {
          //   // 仪表盘的轴线可以被分成不同颜色的多段,我们这里始终是同一个颜色 [1, '#E5E6E8']
          //   color: [
          //   [0.1, 'red'], // 0~10% 红轴
          //   [0.2, 'green'], // 10~20% 绿轴
          //   [0.3, 'blue'], // 20~30% 蓝轴
          //   ],
          //   width: 10
          // }
        },
        // 分隔线样式。
        splitLine: {
          show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
          length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
          lineStyle: {
            width: 10, // 分隔线线长。支持相对半径的百分比。
            color: '#E5E6E8', // 线的颜色
          }
        },
        // 仪表盘详情,用于显示数据。
        detail: {
          show: false
        },
      },
      // 圆环
      {
        type: 'pie',
        center: ['40%', '50%'], // 饼状图的位置
        /**
         * radius:饼状图的大小
         * 它是一个数组,第1个值表示里面的圆的大小
         * 第2个值表示外面的圆的大小
         * */
        radius: ['45%', '60%'],
        itemStyle: {
          normal: {
            label: {
              padding: [0, 0],
              alignTo: 'labelLine'
            },
            color: (list) => {
              let colorList = [
                {
                  "colorStart": "#FF9800",
                  "colorEnd": "#FFD180"
                },
                {
                  "colorStart": "#673AB7",
                  "colorEnd": "#9575CD"
                },
                {
                  "colorStart": "#0F9D58",
                  "colorEnd": "#4CAF50"
                },
                {
                  "colorStart": "#00BCD4",
                  "colorEnd": "#64FFDA"
                },
                {
                  "colorStart": "#E91E63",
                  "colorEnd": "#FF80AB"
                },
              ]
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //左、下、右、上
                  offset: 0,
                  color: colorList[list.dataIndex]["colorStart"],
                },
                {
                  offset: 1,
                  color: colorList[list.dataIndex]["colorEnd"],
                },
              ]);
            }
          }
        },
        // 标签的视觉引导线配置
        labelLine: {
          show: true, // 是否显示视觉引导线
          length: 20, // 视觉引导线第一段的长度。 
          length2: 50,  // 视觉引导项第二段的长度。 
          lineStyle: {
            color: '#E5E6E8', // 这里设置扇线颜色为灰色
            width: 1, // 线段宽度  
            type: 'solid', // 线段类型,默认为实线 
          }
        },
        // 从 v5.0.0 开始支持  标签的统一布局配置。
        labelLayout:{
          // 标签垂直对齐方式,可以设置'top', 'middle', 'bottom'。
          verticalAlign:'bottom',
          // 标签在 y 方向上的像素偏移,设置标签在引导线的上方
          dy:-4
        },
        // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
        label: {
          show: true,
          // 标签的位置。
          position: 'outside',
          normal: {
            textStyle: {
              color: '#333333' // 设置引导线外层文字描述的颜色
            },
            // 字符串模板 模板变量有:
            // {a}:系列名。
            // {b}:名称。
            // {c}:数据值。
            // {d}:百分比。
            formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
            padding: [0, -40], // 设置标签距离引导线水平方向的距离
            rich: {
              aisB1: {
                color: '#333333',
              },
              aisC1: {
                color: '#333333',
              },
              aisD1: {
                color: '#333333', // 这是数据值的颜色
              },
            }
          }
        },
        data: [
          { value: 1048, name: '名称1' },
          { value: 735, name: '名称2' },
          { value: 580, name: '名称3' },
          { value: 484, name: '名称4' },
          { value: 300, name: '名称5' }
        ],
        // 高亮状态的扇区和标签样式 设置饼图外围虚线
        emphasis: {
          // 这里设置悬停时引导线对应名称的颜色,与非悬停时保持一致
          label: {
            color: '#333333'
          },
          labelLine: {
            // 这里设置悬停时引导线的颜色,与非悬停时保持一致
            lineStyle: {
              color: '#E5E6E8'
            }
          }
        }
      },

       // 配置里面的圆
       {
        type: 'gauge',
        center: ['40%', '50%'], // 饼状图的位置
        radius: '35%',
        // 如何是版本是4 这里是359.999;不能是360;否则圆环不能正常显示
        // 如果是版本是5,这里可以是360
        startAngle: 359.999,
        endAngle: 0,
        splitNumber: 4,
        zlevel: 10,
        axisLine: { // 坐标轴线
          lineStyle: { // 属性lineStyle控制线条样式
            color: [
              [1, '#fff']
            ],
            width: '100%',
            shadowColor: '#CDCDCD', //背景阴影颜色
            shadowOffsetX: 0, // X偏移量
            shadowOffsetY: 0, // Y偏移量
            shadowBlur: 10, // 模糊范围
          }
        },
        splitLine: { //分隔线样式
          show: false,
        },
        axisLabel: { //刻度标签
          show: false,
        },
        axisTick: { //刻度样式
          show: false,
        },
        detail: {
          show: false,
        },
        //仪表盘指针。
        pointer: {
          // 不显示仪表盘中的指针
          show: false,
        },
        title: {
          // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。
          // 可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
          offsetCenter: ['0%', "0%"],
          color: '#999999',
        },
        data: [{
          name: "2024-05-09\n15:36:25",
        }]
      },
    ]
  }
  myChart.setOption(option);
</script>

标签:false,show,color,标签,明明白白,设置,仪表盘,Echarts,状图
From: https://www.cnblogs.com/IwishIcould/p/18182022

相关文章

  • echarts折线鼠标悬浮时只显示了一条线的数据
    项目中对悬浮的值formatter进行了唯一给值,并没有针对每一个进行赋值问题代码大致为:formatter:(params)=>{return`${params[0].name}<br/>${params[0].值1}${params[0].值2}:${params[0].value==0?"-":Number(params[0].value).toLoca......
  • 关于vue3中使用echarts设置tooltip的type为axis不显示的问题
    因为vue3中的数据对象是用的proxy监听的,要取值需要用value等方法取出来,解决方法:使用markRaw让echarts从监听对象变成普通对象!在Vue3中,markRaw是一个用于告诉Vue的响应性系统不要对某个对象进行转换或追踪其响应性的函数。当你有一个对象,并且你确定你不需要它成为响应性......
  • excel 汇总运算后生成柱状图
    defsum(df,q_name,sum_index):#df=pd.DataFrame#pd_frame.sum()#print(df.values)#Aggregations(聚合),多索引,,'季度'df_agg=df.groupby(['厂家','季度'])['销量'].agg([np.sum])......
  • ECharts自定义提示框浮层内容
    因为提示框内容支持字符串模板和回调函数两种形式字符串模板模板变量有{a},{b},{c},{d},{e},分别表示系列名,数据名,数据值等等,但是trigger属性为axis的时候它数据条就很多了,就可以用{a0},{a1},{a2}这样子去拿数据跟数组下标一样(官网有详细示例)示例:在`option`中的`tooltip`里边写......
  • Echarts -- 实现动态加载series
    Echarts--实现动态加载series:https://blog.csdn.net/m0_74444744/article/details/134467184?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%20series&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-1344671......
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
    https://www.cnblogs.com/Can-daydayup/p/18166862 思维导航前言项目介绍项目源代码BlazorWasm中快速使用项目更多图表截图项目源码地址优秀项目和框架精选DotNetGuide技术社区交流群前言今天大姚给大家分享一个.NET开源(MITLicense)、功能强大、简单、灵活、跨......
  • echarts显示双y轴:折线图+柱状图
    先验知识:yAxis. positiony轴的位置。可选:'left''right'默认grid中的第一个y轴在grid的左侧('left'),第二个y轴视第一个y轴的位置放在另一侧。注:若未将 yAxis.axisLine.onZero 设为 false ,则该项无法生效series-bar. yAxisIndex number使用的 y轴的......
  • vue+echarts实现地图及飞线图
    参考:1.Echarts画区域飞线地图  https://blog.csdn.net/Daylighte/article/details/122502754?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-122502754-blog-122918939.235^v43^control&spm=1001.2101.3001.4242.2&utm_re......
  • Echarts制作时变数据可视化+2024 QQ群聊记录制作词云图
    时变数据可视化Echarts其实就是个js文件,在开头导入一下就好了其实这部分我没有做太多时间,大部分代码都是gpt直接生成的(乐)所以这里只分享一下我觉得代码里比较有意思的部分先放效果图图中渐变效果的代码(来源CSDN某个博主)lineStyle:{shadowCo......
  • echarts 图表+表格实现上图下表
    效果图:1、结构布局<divid="graphQuantityStatistics"></div>2、配置图表data(){    return{      option:{        legend:[          {            left:0,     ......