可视化大屏项目心得

最新推荐文章于 2024-08-01 15:11:25 发布

_致远

最新推荐文章于 2024-08-01 15:11:25 发布

阅读量4.1w

点赞数 5

分类专栏： echarts 文章标签：可视化数据可视化

本文链接：https://blog.csdn.net/barbiElluck/article/details/116886096

版权

本文介绍了应对数据可视化趋势的可视化大屏项目，重点使用了echarts 4.3.0版本进行图表展示。通过将options单独管理，实现了组件化，优化了代码结构。在项目中遇到的挑战包括柱状图颜色渐变、企业列表轮播滚动及百度地图的集成，详细探讨了解决方案。

摘要由CSDN通过智能技术生成

可视化大屏介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。
在这里插入图片描述

使用echarts

1.使用 echarts 版本: “echarts”: “^4.3.0”
2.在使用echarts时，我会把options单独放在一个js文件里，这样方便管理优化。
3.这样的处理方式也会减少，vue文件的大小，代码看起来相对整洁。
4.这样的处理方式也是实现了组件化。

项目疑难

1.柱状图颜色渐变

在这里插入图片描述

series: [
    {
   
      name: '2019年',
      type: 'bar',
      data: [0.3,0.23,0.75,0.88],
      barWidth: 7,
      itemStyle: {
    // 柱状图的背景色
        normal: {
   
          // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
   
            var index = params.dataIndex
            var colorList = [
              // 渐变颜色的色值和透明度
              // 透明度从0
              ['rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(15,235,255,0.3)', 'rgba(13,94,208,0.3)', 'rgba(255,155,15,0)', 'rgba(253,103,96,0.3)'], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
              ['rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(15,235,255,0.6)', 'rgba(13,94,208,0.6)', 'rgba(255,155,15,0.6)', 'rgba(253,103,96,0.6)']
            ]
            return {
   
              colorStops: [{
   
                offset: 0.3, // 颜色的开始位置
                color: colorList[0][index] // 0% 处的颜色
              },
              {
   
                offset: 0.6, // 颜色的结束位置
                color