Vue ECharts bar柱状图 动态生成渐变色 - echarts.graphic.LinearGradient + 圆角半径 - barBorderRadius - 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

效果

一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、动态生成渐变色

4、设置圆角半径

四、完整示例

 欢迎扫描下方二维码关注VX公众号

---

效果

一、介绍

 1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

<template>
  <div id="main"></div>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    name: "mutiYAxis",
    data() {
      return {
     
      };
    },
    methods: {
      initChart() {
        let data = this.data
        let chartDom = document.getElementById("main");
        let myChart = echarts.init(chartDom);
        let option;

        ...详见完整示例   
      },
    },
  };
</script>

<style scoped>
  #main {
    width: 1000px;
    height: 500px;
  }
</style>

3、动态生成渐变色

let rgbColors = ['84, 112, 198','145, 204, 117','250, 200, 88','238, 102, 102','115, 192, 222','59, 162, 114']; // 预设颜色数组

series: [
  {
    data: series,
    type: 'bar',
    itemStyle: {
      normal: {
        color: (params) => {
          // 循环预设颜色数组
          if(params.dataIndex >= rgbColors .length) params.dataIndex = params.dataIndex % rgbColors .length;
          // 颜色渐变，右/下/左/上，从下往上渐变
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: `rgba(${rgbColors[params.dataIndex]}, 1)` },
            { offset: 0.5, color: `rgba(${rgbColors[params.dataIndex]}, .6)` },
            { offset: 1, color: `rgba(${rgbColors[params.dataIndex]}, .3)` }
          ])
        },
       }
     },
   }
 ]

4、设置圆角半径

        number  Array

        单位px，支持传入数组分别指定 4 个圆角半径。 如:

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）

series: [
  {
    data: series,
    type: 'bar',
    itemStyle: {
      normal: {
        barBorderRadius: 50,
     },
   }
 ]

Documentation - Apache ECharts

四、完整示例

<template>
  <div id="main"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      data: [
        {
          "name": "北京市",
          "value": "2100",
        },
        {
          "name": "重庆市",
          "value": "1800",
        },
        {
          "name": "广西壮族自治区",
          "value": "1260",
        },
        {
          "name": "四川省",
          "value": "1980",
        },
        {
          "name": "新疆维吾尔自治区",
          "value": "2068",
        },
        {
          "name": "宁夏回族自治区",
          "value": "1682",
        },
        {
          "name": "西藏自治区",
          "value": "1988",
        },
        {
          "name": "内蒙古自治区",
          "value": "1868",
        },
        {
          "name": "上海市",
          "value": "2036",
        },
        {
          "name": "天津市",
          "value": "1920",
        },
        {
          "name": "广东省",
          "value": "1990",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;

      let xData = [];
      let series = [];
      let rgbColors = ['84, 112, 198','145, 204, 117','250, 200, 88','238, 102, 102','115, 192, 222','59, 162, 114']; // 预设颜色数组
      
      this.data.map(item => {
        xData.push(item.name);
        series.push(item.value);
      })

      option = {
        grid: {
          bottom: '22%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 阴影效果
          },
          formatter: params => {
            let result = params[0].axisValueLabel;
            for (let i = 0; i < params.length; i++) {
              let param = params[i];
              result += '<br/>' + param.marker + param.name + '  ' + param.value;
            }
            return result;
          },
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false, // 轴刻度
          },
          data: xData,
        },
        yAxis: {
          type: 'value',
          alignTicks: true,
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false
          },
        },
        series: [
          {
            data: series,
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 50,
                color: (params) => {
                  // 循环预设颜色数组
                  if(params.dataIndex >= rgbColors.length) params.dataIndex = params.dataIndex % rgbColors.length;
                  // 颜色渐变，右/下/左/上，从下往上渐变
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: `rgba(${rgbColors[params.dataIndex]}, 1)` },
                    { offset: 0.5, color: `rgba(${rgbColors[params.dataIndex]}, .6)` },
                    { offset: 1, color: `rgba(${rgbColors[params.dataIndex]}, .3)` }
                  ])
                },
              }
            },
          }
        ]
      }

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#main {
  width: 1000px;
  height: 500px;
}
</style>

 欢迎扫描下方二维码关注VX公众号