乐趣区

关于前端:echarts数据可视化动态柱状图

jiezi

成果如下：

此处用的 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

如果感觉这篇文章对你有帮忙，欢送点赞👍、珍藏💖、转发✨哦~

退出移动版