vue项目中使用echarts实现雷达分析图-阿里云开发者社区

开发者社区> 小周sir> 正文

vue项目中使用echarts实现雷达分析图

简介: vue项目中使用echarts实现雷达分析图
+关注继续查看
  • 在工作中常常会开发大数据可视化展示效果,今天就使用vue结合echarts实现一个雷达分析图,记录一下,便于以后工作中查询
    在这里插入图片描述

在vue安装echarts

npm install echarts

使用

  • 在methods定义一个方法drawRight1接受后端返回的数据
drawRight1 (indicatorData, seriesData) {
      let chart = this.$echarts.init(document.getElementById('chart_1'));
      let option = {
        tooltip: {
          trigger: 'axis',
          position: [110, 20],
          textStyle: {
            fontSize: 10,
          }
        },
        radar: [
          {
            indicator: indicatorData || [
              { text: '发布文章数', max: 1000 },
              { text: '评论数', max: 1000 },
              { text: '分享数', max: 1000 },
              { text: '点赞数', max: 1000 },
              // { text: '阅读数', max: 200 },             
            ],
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#0E275AFF"]  // 图表背景网格的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#045C97FF' // 图表背景网格线的颜色
              }
            },
            name: {
              textStyle: {
                fontSize: 10,
              }
            },
            center: ['50%', '50%'],
            radius: 45,
            nameGap: 5,
            shape: 'circle',
          },

        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {
              color: '#045C97'
            },
            areaStyle: {
              color: '#0991ED'
            },
            data: [
              {
                value: seriesData || [60, 73, 85, 40],
                name: '微信'
              }
            ]
          }
        ]
      };
      chart.setOption(option)
    },

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Ext架构分析(4)--Container之旅
BoxComponent继承了Component,主要是实现了设置组件的宽度、高度以及位置(相对于容器或相对于document.body),他的实现较为简单,需要注意的是:     1.BoxComponent可以通过resizeEl属性设置进行调整大小的对象,positionEl属性设置调整位置的对象,并且在render事件中进行设置,将属性封装为Ext.element对象;     2.setSize和setPosition方法是在afterRender事件中被触发的,换句话说,组件调整位置和大小是在渲染后进行的。
699 0
Ext架构分析(5)--Layout初识:ContainerLayout
如果学习了Container,你回发现,在Ext2.0中,Container和Layout的关系是密不可分的。任何Container都需要在render方法中使用layout对象进行布局。  让我们先看一下所有layout的父类:ContainerLayout。
615 0
持续集成之道:在你的开源项目中使用Travis CI
自从接触并践行了敏捷的一些实践之后,便深深的喜欢上了敏捷。尤其是测试自动化和持续集成这两个实践,可以显著的提高软件的质量和集成效率,实时检测项目健康度,使团队成员对项目保持充足的信心。 但是对于个人项目而言,虽然测试自动化好实现,但是要实现持续集成还是稍有难度。
955 0
Vue项目通过scrollIntoView实现锚点滚动
Vue项目通过scrollIntoView实现锚点滚动
10 0
ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站
ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站
106 0
使用 VuePress 搭建博客网站
使用 VuePress 搭建博客网站
69 0
使用Insert Select实现同时向多个表插入记录
使用Insert Select实现同时向多个表插入记录一、无条件 INSERT ALL-----------------------------------------------------...
530 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
51
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载