【JEECG】修改Viser图表颜色样式

Viser真的真的真的很不行 ，最好先学完Echart再来看这个，还好理解些，或者就别看这个了  ，echart不好吗！！

因为项目用的jeecg，里面图表用Viser写的，所以愁苦了好一阵 

以柱状图为例

Vue环境：

    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
      <v-tooltip/>
      <v-axis/>
      <v-bar position="x*y" :color="color"/>
    </v-chart>

因为要修改的是柱状体的样式 ，所以在<v-bar> 标签里修改属性  

如果是折线图 修改折线  <v-line   :color="" …… >     修改点 <v-point    :color=""……>  依此类推 

可以 直接填颜色 

 :color="['#020DB65','#8D20DB']"

还可以指定

官方文档：['field', colors]，将数据值映射至指定的颜色值 colors（可以是字符串也可以是数组），此时用于通常映射分类数据

 :color="['city','#50e969']"

city代表什么 ，带入实例，看下图：

渐变颜色：

:color="[[ 'l(270) 0:#1b2c4e 1:#dc5047']]"

l（） 后面传入角度，0 代表起始颜色，1 代表结束颜色

简单颜色：

:color="[['red-blue']]"

加上指定：

:color="[['city', 'l(270) 0:#1b2c4e 1:#dc5047']]

在组件中的应用

<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
      <v-tooltip/>
      <v-axis/>
      <v-bar position="x*y" :color="color"/>
    </v-chart>
  </div>
</template>

如上 写好一个Bar图表的模板 ，这里的 ：color="color"   是因为 color是prop名称

  props: {
      color:[],
      dataSource: {
        type: Array,
        required: true
      },
        ……
}

应用时，import导入所在路径，注册组件

import Bar from '@/components/chart/Bar'
export default {
    components: {
        Bar,
    }
}

代码中

<bar title="柱状图" :dataSource="barData" :color="['#01b4ff']"/>

方便对不同图表修改颜色

 

 

好啦 ，修改颜色差不多到这里啦！如果觉得有用话，帮我点赞收藏啦！

有什么问题欢迎评论区交流！