echarts饼图详解

最新推荐文章于 2025-07-21 18:41:46 发布

闫炳岳

最新推荐文章于 2025-07-21 18:41:46 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/yanby921005/article/details/86543131

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用ECharts库展示2018年投标情况的图表配置代码，包括标题、图例、饼图系列等元素的设置，通过不同的颜色区分中标、落标、未开标和评标中的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var getOption1 = function(chartType) {
   var chartOption1 = {
       calculable: false,
       title: {
           text: '2018年投标情况概览',
           x: 'center',
           textStyle: {
               "color": "#8ECBFF"
           },
       },
       legend: {
           top: 25,
           data: ['中标', '落标', '未开标', '评标中'],
           textStyle: { //图例文字的样式
               color: '#8ECBFF',
               fontSize: 13
           }
       },
       series: [{
           type: 'pie',
           radius: '65%',
           center: ['50%', '63%'],
           label: { //饼图图形上的文本标签
               normal: {
                   show: true,
                   textStyle: {
                       fontWeight: 700,
                       fontSize: 13 //文字的字体大小
                   },
                   formatter: '{b}:{c}: ({d}%)',
               }
           },
           data: [{
               value: 10,
               name: '中标',
               itemStyle: {
                   normal: {
                       color: '#F4AA61'
                   }
               }
           }, {
               value: 32,
               name: '落标',
               itemStyle: {
                   normal: {
                       color: '#4EC7B8'
                   }
               }
           }, {
               value: 10,
               name: '未开标',
               itemStyle: {
                   normal: {
                       color: '#90C9F6'
                   }
               }
           }, {
               value: 1,
               name: '评标中',
               itemStyle: {
                   normal: {
                       color: '#CACACB'
                   }
               }
           }]
       }]
   }
   return chartOption1;
};