从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 展望

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

相关推荐
别拿曾经看以后~25 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死28 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人39 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人40 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍