Echart 相关知识

最新推荐文章于 2024-11-14 15:33:48 发布

leexiehui

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量420

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/leexiehui/article/details/123081679

版权

本文介绍了如何使用Apache ECharts库来制作饼图，并展示了如何自定义图表的颜色和图例位置。示例代码中展示了饼图的配置，包括标题、图例和数据项的颜色。此外，还提供了关于ECharts title和legend参数的详细说明，以及RGB到十六进制颜色转换的资源。

摘要由CSDN通过智能技术生成

51 首页

Examples - Apache EChartshttps://echarts.apache.org/examples/zh/index.html#chart-type-pie

1.1 饼图制作

option = {
  title: {
    text: '医美抗衰项目目标消费者性别比例',
    subtext: '',
    left: 'center',
    textStyle:{
            color :'#FFD700'
        }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    bottom: 'bottom'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 56, name: '女' ,itemStyle:{'color':'#EE82EE'}},
        { value: 44, name: '男',itemStyle:{'color':'#FFA500'}}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

参考资料

1. title 参数

echart3 title配置参数_小胡哥的博客-CSDN博客_echart title颜色title 下的各个属性如下图：showtitle.show | boolean [ default: true ] 是否显示标题组件。例子：option = { title : { show:true,//默认为true，可以省略 text: '某站点用户访问来源', subtext: '纯属虚构https://blog.csdn.net/weixin_37632678/article/details/790951382 legend 参数