echarts数据可视化-动态柱状图

效果如下：

此处用的echarts柱状图为：Axis Align with Tick
本文的要讨论的内容：
1、柱状图样式修改
2、多数据的缩放展示

柱状图样式修改

// 数据
const city = reactive([
    { value: 335, name: '长沙' },
    { value: 310, name: '武汉' },
    { value: 274, name: '岳阳' },
    { value: 235, name: '重庆' },
    { value: 380, name: '杭州' }
])
const cityName = reactive([])  // 城市-通过遍历将city的name放到cityName中
const cityValue = reactive([]) // 值-通过遍历将city的value放到cityValue中

// option 配置项
const axisAlign = () => {
    let option = {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00fefb' // 0% 处的颜色
            }, {
                offset: 1, color: '#0063ce' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        /* 鼠标移入的工具提示 */
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'line'
            },
            backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */
            borderColor: 'transparent',  // 边框色
            textStyle: {   // 文字颜色
                color : 'rgba(255,255,255,0.8)'
            }
        },
        /* x y 轴的文字样式 */
        textStyle:{
            color: '#4c9bfd'
        },
        // 轴下方指向的颜色
        axisTick: {
            lineStyle : { color : '#096b80' }
        },
        /* 布局 */
        grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '4%',
            show: true,  // 为true时允许修改样式
            containLabel: true,
            borderColor: '#096b80'  /* 边框的颜色 */
        },
        /* 直角坐标系 grid 中的 x 轴 */
        xAxis: [
            {
            type: 'category',
            data: cityName,  /* 数据 */
            axisTick: {
                alignWithLabel: true
            },
            }
        ],
        /* 直角坐标系 grid 中的 y 轴 */
        yAxis: [
            {
            type: 'value',
            splitLine: {   // y轴分割线配置
                show:true,
                lineStyle: {
                    color: "#096b80",
             }
            }
            },
        ],
        /* 整体配置 */
        series: [
            {
            name: '用户统计',
            type: 'bar',
            barWidth: '60%',
            data: cityValue,

            }
        ]
        };
        myChart.setOption(option);
}

多数据的缩放展示

某些情况下，柱状图需要展示非常多的数据并进行比对，如果我们将所有的数据全都渲染出来会出现数据的堆叠或空间挤压，不方便观看且极不美观，如下图所示：

我们可以将这种多数据柱状图改成区域缩放展示，在区域缩放中可以配置滑动缩放展示，用户在滑动条上进行缩放或漫游。核心配置就是dataZoom，在使用dataZoom之前需要引入和注册组件

// 引入和注册
import { DataZoomComponent } from 'echarts/components';
echarts.use([DataZoomComponent]);

引入完成后就可以在option中配置dataZoom

/* 设置滚动条，处理数据过多的挤压问题 */
dataZoom : [
   {
    type: 'slider',  // 滑动条型数据区域缩放组件
    show: true,  // 允许修改样式
    /* start和end表示滚动条默认展示的比例,这里为1~50% */
    start: 1,  
    end: 50,
    height:15,  // 滚动条高度
    bottom:5,   // 滚动条距离底部位置
    xAxisIndex: [0],  // 对应xAxis中的data数据，数组中的第0位，如果是[0,2]则是数组中0~2位，这里xAxis的data中只有一个对象，所以选[0]
  }
]

这样一个简单的滑块缩放就完成了，当前的配置当中，除了滑块大小和位置外所有的样式都是官方提供的初始样式，为了融入项目整体，我们需要给滑块配置样式

/* 设置滚动条，处理数据过多的挤压问题 */
dataZoom : [
    {
      type: 'slider',
      show: true,
      /* start和end表示滚动条默认展示的比例,这里为1~50% */
      start: 1,  
      end: 50,
      height:15,  // 滚动条高度
      bottom:5,   // 滚动条底部位置
      borderColor : '#4c9bfd',  // 边框颜色
      /* 滑块内数据的样式 */
      dataBackground : {
          // 滑块内线条的颜色
          lineStyle : {
               color : '#4c9bfd'
          },
          /* 滑块内阴影的颜色 */
          areaStyle: {
               color : '#4c9bfd'
          } 
      },
      /* 滑块内选中数据的样式 */
      selectedDataBackground : {
          // 滑块内线条的颜色
          lineStyle : {
             color : '#4c9bfd'
          },
          /* 滑块内阴影的颜色 */
          areaStyle: {
             color : '#4c9bfd'
          } 
       },
       xAxisIndex: [0],  // 对应xAxis中的data数据，数组中的第0位，如果是[0,2]则是数组中0~2位
       handleSize: '50%',  /* 滚动条的左右滑块大小 */
       moveHandleSize : 5,  // 滚动条两侧手柄大小
       moveHandleStyle : {  // 滚动条样式
            color : '#4c9bfd'
        },
       textStyle: {  // 滑块文字样式
            color : '#4c9bfd'
        }
      }
]

完整的样式配置如下：

const axisAlign = () => {
    let option = {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
        color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00fefb' // 0% 处的颜色
            }, {
                offset: 1, color: '#0063ce' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        /* 鼠标移入的工具提示 */
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'line'
            },
            backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */
            borderColor: 'transparent',  // 边框色
            textStyle: {   // 文字颜色
                color : 'rgba(255,255,255,0.8)'
            }
        },
        /* x y 轴的文字样式 */
        textStyle:{
            color: '#4c9bfd'
        },
        // 轴下方指向的颜色
        axisTick: {
            lineStyle : { color : '#096b80' }
        },
        /* 设置滚动条，处理数据过多的挤压问题 */
        dataZoom : [
          {
            type: 'slider',
            show: true,
            /* start和end表示滚动条默认展示的比例,这里为1~50% */
            start: 1,  
            end: 50,
            height:15,  // 滚动条高度
            bottom:5,   // 滚动条底部位置
            borderColor : '#4c9bfd',  // 边框颜色
            /* 滑块内数据的样式 */
            dataBackground : {
                // 滑块内线条的颜色
                lineStyle : {
                    color : '#4c9bfd'
                },
                /* 滑块内阴影的颜色 */
                areaStyle: {
                    color : '#4c9bfd'
                } 
            },
            /* 滑块内选中数据的样式 */
            selectedDataBackground : {
                // 滑块内线条的颜色
                lineStyle : {
                    color : '#4c9bfd'
                },
                /* 滑块内阴影的颜色 */
                areaStyle: {
                    color : '#4c9bfd'
                } 
            },
            xAxisIndex: [0],  // 对应xAxis中的data数据，数组中的第0位，如果是[0,2]则是数组中0~2位
            handleSize: '50%',  /* 滚动条的左右滑块大小 */
            moveHandleSize : 5,  // 滚动条两侧手柄大小
            moveHandleStyle : {  // 滚动条样式
                color : '#4c9bfd'
            },
            textStyle: {  // 滑块文字样式
                color : '#4c9bfd'
            }
          },
        ],
        /* 布局 */
        grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            top: '4%',
            show: true,  // 为true时允许修改样式
            containLabel: true,
            borderColor: '#096b80'  /* 边框的颜色 */
        },
        /* 直角坐标系 grid 中的 x 轴 */
        xAxis: [
            {
            type: 'category',
            data: cityName,  /* 数据 */
            axisTick: {
                alignWithLabel: true
            },
            }
        ],
        /* 直角坐标系 grid 中的 y 轴 */
        yAxis: [
            {
            type: 'value',
            splitLine: {   // y轴分割线配置
                show:true,
                lineStyle: {
                    color: "#096b80",
             }
            }
            },
        ],
        /* 整体配置 */
        series: [
            {
            name: '用户统计',
            type: 'bar',
            barWidth: '60%',
            data: cityValue,

            }
        ]
        };

        myChart.setOption(option);
}

到这里我们的柱状图配置就结束了🎉🎉🎉~
最后附上官方配置项文档：https://echarts.apache.org/zh/option.html#title

如果觉得这篇文章对你有帮助，欢迎点赞👍、收藏💖、转发✨哦~