viser-vue数据图改色

最新推荐文章于 2023-04-28 14:46:23 发布

qq_45353152

最新推荐文章于 2023-04-28 14:46:23 发布

阅读量1k

点赞数 2

文章标签：可视化 vue.js

本文链接：https://blog.youkuaiyun.com/qq_45353152/article/details/115541023

版权

本文介绍了一种在柱状图中实现颜色定制的方法。通过使用特定的代码配置，可以根据不同的数据类别设置颜色，实现图表的个性化展示效果。具体展示了如何在给定的数据集上应用这些颜色设置。

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

柱状图改色结果

代码中红色为关键点，柱状图<v-stack-bar>标签饼状为<v-pie>标签。颜色color="[]"形式的数据，前缀的country字段对应上 const sourceData内的数据数据渲染字段

<v-stack-bar position="year*percent" :color="['country',['#EB0EF5','#1800ff']]" :vStyle="stackBarStyle" />

const sourceData = [

    { country: '未完成', year: '居民住宅区清单和工作清单', value: 163 },

    { country: '已完成', year: '居民住宅区清单和工作清单', value: 502 },

    { country: '未完成', year: '电子商务、物流业、新型商业风险评估', value: 203 },

    { country: '已完成', year: '电子商务、物流业、新型商业风险评估', value: 635 },

    { country: '未完成', year: '落实居民住宅区全部落实电动自行车集中管理要求措施', value: 276 },

    { country: '已完成', year: '落实居民住宅区全部落实电动自行车集中管理要求措施', value: 809 },

对应字段，颜色顺次显示。