从0开始搭建vue + flask 旅游景点数据分析系统( 八):美化前端可视化图形

这一期来美化我们仅有的三个可视化图形(可怜),毕竟,帅是一辈子的事。

1 折线图改面积图(渐变色)

需求:折线图改为蓝色的面积图,并且有一点的渐变色。

这个非常简单,只需要修改LineChart.vue的series部分,添加一个属性:

jsx 复制代码
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(80,215,237,0.99)'
                },
                {
                  offset: 1,
                  color: 'rgb(28,70,206)'
                }
              ])
            },

就实现了一个渐变色的面积图了:

2 柱状图

需求:柱状图五个柱子的颜色不同,并且带有渐变色,柱子是圆角的并且文字显示在柱子上方。

这个实现也纯粹是echarts的设置问题。

jsx 复制代码
series: [
          {
            name: '评分',
            type: 'bar',
            data: [8.5, 9.0, 7.5, 9.3, 8.0],
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              borderRadius: [5, 5, 0, 0], // 设置柱子的圆角
              color: (params) => {
                // 定义每根柱子的渐变色
                const colorList = [
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: 'red' },
                    { offset: 0, color: 'pink' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: 'orange' },
                    { offset: 0, color: 'lightyellow' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: 'yellow' },
                    { offset: 0, color: 'lightyellow' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: 'green' },
                    { offset: 0, color: 'lightgreen' }
                  ]),
                  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: 'cyan' },
                    { offset: 0, color: 'lightcyan' }
                  ])
                ];
                return colorList[params.dataIndex];
              }
            },
          },
        ],

实现效果:

3 饼图

需求:饼图可以选中,并且默认选中景点最多的城市,并且具体的数据在文字后面可以显示。

这个需要开启select模式设置才有用,开启后就可以选中饼图了,默认的选中模式需要在获取数据的时候找到数据最大的那个,并且设置selected=true

jsx 复制代码
series: [{
          type: 'pie',
          selectedMode: 'single', //注意这个必须有,否则设置selected无效
          data: [
            {name:'东京',value:104},
            {name:'大阪',value:81},
            {name:'京都',value:47},
            {name:'横滨',value:51},
            {name:'名古屋',value:62}],
          label: {
            normal: {
              position: 'outside', // 标签显示在饼图外部
              formatter: '{b}({d}%)' // 标签格式
            }
          },
        }]
        
   mounted() {
    getCityRank().then(res => {
      // 获取最大值对应的索引
      const maxIndex = res.data.data.findIndex(item => item.value === Math.max(...res.data.data.map(i => i.value)));

      // 选中最大值对应的扇区
      this.chartOptions.series[0].data = res.data.data
      this.chartOptions.series[0].data[maxIndex].selected = true;
    })
  }

实现效果:

4 展望

下一期开始,我们来做数据的增删改查对接 ✅

相关推荐
Jet_closer_burning26 分钟前
Vue.js 自定义指令:从零开始创建自己的指令
前端·javascript·vue.js
优雅永不过时·1 小时前
three.js实现地球 外部扫描的着色器
前端·javascript·webgl·three.js·着色器
peachSoda72 小时前
随手记:鼠标触顶方法
前端·javascript·vue.js
疯狂的沙粒2 小时前
Vue项目开发 formatData 函数有哪些常用的场景?
前端·javascript·vue.js
逆旅行天涯2 小时前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
毛毛三由2 小时前
【10分钟学习Vue自定义指令开发】鼠标放置提示指令
前端·javascript·vue.js
一秒美工助手2 小时前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码,自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设
桑榆肖物3 小时前
将 .NET Aspire 添加到现有应用:前端 JavaScript 项目处理
前端·javascript·.net
Wh1teR0se5 小时前
[极客大挑战 2019]Secret File--详细解析
前端·web安全·网络安全
ZhaiMou6 小时前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5