echarts中柱状图颜色-电子图表饼图指标文本颜色设置不同

2023-08-21 0 7,273 百度已收录

学习记录,平时开发中遇到的问题

电子图表饼图标签文本颜色

要求:绘制带有指标文本标签的圆环饼图(文本的颜色必须与零件的颜色相同)。

数据:

pieData: [
    {
        name: '犯人',
        value: 30
    },
    {
        name: '官差',
        value: 35
    },
    {
        name: '平民',
        value: 35
    },
]// 颜色
colorList: ['#EA7267', '#F0D84B', '#7AE72F']

虽然制作甜甜圈饼图很简单,但在电子图表网站上也有示例,地址:

主要草图代码:

let options = { 
    ......
    series: [
        {
            type: 'pie',
            radius: ['40%', '62%'],
            data: this.pieData,
            itemStyle: {
                color:(params)=> {
                    var index = params.dataIndex;
                    return this.colorList[index];
                },
            },
            label: { },
        }
    ],
}

疗效:

问题

很明显,饼图的指标文本标签中的文本颜色是相同的

从 echarts 的配置项 API 中也可以知道可以在标签中设置颜色进行配置,这样配置的颜色是一样的

溶液

既然是这样,那就太久了,你只能在数据传入数据上大惊小怪

将标签属性添加到前面的pieData链表中,这样就不需要重置系列中的标签,指标中文单词的颜色不同

更改后:

series: [
    {
        type: 'pie',
        radius: ['40%', '62%'],
        data: this.pieData.map((item, index)=> {
            item.label = { 
                color: this.colorList[index]
            }
            return item;
        }),
        itemStyle: {
            color:(params)=> {
                var index = params.dataIndex;
                return this.colorList[index];
            },
        },
    }
],

echarts中柱状图颜色-电子图表饼图指标文本颜色设置不同

疗效:

饼图位置

这里再说一个知识点,电子图表中的一般折线图和条形图中如果要调整画布中的位置可以使用grid属性,而饼图则不同,饼图需要调整系列中的中心,这是一个链表

中心是

echarts中柱状图颜色-电子图表饼图指标文本颜色设置不同

饼图的中心(中心)坐标,链表的第一项是水平坐标,第二项是垂直坐标。第一项相对于集装箱长度,第二项相对于集装箱高度,支持比率。

例:

后端开发总会遇到图表的需求echarts中柱状图颜色,草图可以简单使用画布,复杂的统计图表基本上会用到库,比如:echarts、amcharts。

由于业务需求不同echarts中柱状图颜色,总会有卡点,我通常会记录自己解决的问题,以防我能帮助别人(虽然我一定会从别人的博客中找到问题的解决方案)。

“错误”郑周瑜

我打了江南,走过在

季节中等待的模样,就像莲花的盛开和飘落

东风不来,八月飞不飞。

你的心就像一座寂寞的小城

就像白玉的街道走向黑夜。

声音无声,八月的春幕不露

你的心是一扇隐藏的小窗口。

我爸爸的马蹄铁是一个美丽的错误,

我不是海归,我是路人!

路走过echarts 3 关系图,人见了。每个人都有自己的

理由,每个人都有自己的原因!

ECharts 是由百度后端技术部门开发的基于 Javascript 的数据可视化图表库,提供直观、生动、交互式和可定制的数据可视化图表。

使用 JavaScript 实现开源可视化库,可以在 PC 和联通设备上流畅运行,兼容当前大多数浏览器,并依靠轻量级矢量图形库 ZRender 提供直观、交互式、高度定制的数据可视化图表。ECharts 提供常规折线图、柱形图、散点图、饼图、

烛台图、统计箱形图、地图、热图、折线图

用于地理数据可视化,关系图、树状图、旭日图、用于多维数据可视化的并行坐标、用于 BI 的漏斗图、仪表板,并支持图形之间的混合和匹配。

官方网站:

ECharts 提供了大量常用的数据可视化图表,基于 ZRender(一种新的轻量级画布泛型),创建坐标系、图例、提示、工具箱等基本组件,并在此基础上构建折线图(面积图)、柱形图(方框图)、散点图(气泡图)、饼图(圆环图)、蜡烛图、地图、面向力的布局图、 和幻灯片图表,同时支持任何维度的堆叠和多个图表的混合解释。

多图像联动

范围漫游

大比例散点图

子区域地图模式

要安装 Python,请单击链接进行安装

Python 中有一个 pyecharts 泛型,可以实现类似的功能。

首先在您的环境中安装 pyecharts 库。

输入 pipinstallpyechart 以安装 pyecharts 库。

安装 pyecharts 库后,运行程序并发现导出了相应的包。

这是因为在使用 pipinstall download 命令时,软件默认下载最新版本echarts 3 关系图,并选择以前的旧版本进行下载,代码可以正常运行。

代码示例

目标完成率

#数据分析指标完成情况from pyecharts import Gaugegauge=Gauge('目标完成率')gauge.add('任务指标','完成率',80.2)
#gauge.render('gauge.html')#图表输出gauge.render()gauge

水气球图

#水球图from pyecharts import Liquidliquid=Liquid("水球图")liquid.add("水球",[0.8])#liquid.render('liquid.html')#图表输出到路径下liquid.render()#图表直接输出liquid

箱线图

#箱线图from pyecharts import Boxplotboxplot=Boxplot("箱线图")x_axis=['销售额']y_axis=[[169,126,248,263,265,273,248,241,326,334,479,347],]_yaxis=boxplot.prepare_data(y_axis)boxplot.add("boxplot",x_axis,_yaxis)boxplot.render()#直接导出或者导出到文件内boxplot.render(linebar.html)boxplot

3D 直方图

#3D柱形图from pyecharts import Bar3Dimport json
bar3d=Bar3D("3D柱形图",width=1200,height=600)f=open("bar3ds.json")datas=json.load(f)x_axis=datas['x_axis']y_axis=datas['y_axis']data=datas['data']range_color=datas['range_color']#visualmap热力图bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color)#设置3D图的自动旋转bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color, grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True)#设置3D图的自动旋转的速度bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color, grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True,grid3d_rotate_speed=180)#图表输出bar3d.render('3dbar.html')

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 echarts echarts中柱状图颜色-电子图表饼图指标文本颜色设置不同 https://www.wkzy.net/game/130816.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务