雷达图插件(百度的)echarts

这篇具有很好参考价值的文章主要介绍了雷达图插件(百度的)echarts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 安装echarts图表

npm i echarts

2. 雷达图组件

<template>
<!--  雷达图-->
<!--  图表必须要给宽高-->
  <div ref="myDiv" class="radar-echart"></div>
</template>
<script>
// 完整加载
// var echarts = require('echarts')
// 按需加载 因为体积过大,这里只需要雷达图
var echarts = require('echarts/lib/echarts') // 引入主模块
require('echarts/lib/chart/radar')// 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  created() {
    // 实例创建完毕 但是页面没有渲染完毕
  },
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图标的实例
    myChart.setOption({
      title: {
        text: '基础雷达图'
      },
      tooltip: {},
      legend: {
        data: ['预算分配(Allocated Budget', '实际开销(Actual Spending)']
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        // 每个区域的最高值
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '积极性', max: 100 },
          { name: '帮助同事', max: 100 },
          { name: '自主学习', max: 100 },
          { name: '正确率', max: 100 }
        ]
      },
      series: [{
        name: '预算 vs 开销(Budget vs spending)',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
          {
            value: [10, 1, 100, 5, 100, 0],
            name: '张三'
          },
          {
            value: [50, 50, 50, 50, 50, 10],
            name: '李四'
          }
        ]
      }]
    })
  }
}
</script>
<style scoped>
.radar-echart{
  width: 600px;
  height: 400px;
}
</style>

文章来源地址https://www.toymoban.com/news/detail-861046.html

到了这里,关于雷达图插件(百度的)echarts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序使用echarts图表-雷达图

    本文介绍下小程序中如何使用echarts 如果是通过npm安装,这样是全部安装的,体积有点大 我这边是使用echarts中的一个组件来实现的,下边是具体流程,实际效果是没有外边的红色边框的,加红色边框的效果是这篇说明 1.echarts光网有提到一个小程序组件 echarts-for-weixin点击下载

    2024年01月21日
    浏览(40)
  • 小程序中使用echarts实现带边框雷达图

    小程序中怎么使用echarts的流程在这边文章,点击去观看 我们项目需要实现一个带边框的雷达图,看了API之后没有发现怎么去实现这个边框,所以想到了画两个雷达图来实现这个边框,具体效果如上,代码如下 通过第二个雷达图跟第一个雷达图同心圆,半径比实际展示的大一

    2024年01月21日
    浏览(35)
  • 前端下拉框select标签的插件——select2.js

    本文采用的是select2 版本: Select2 4.0.6-rc.1。 可以兼容IE8及以上。亲测过。 官网:Getting Started | Select2 - The jQuery replacement for select boxes

    2024年02月01日
    浏览(33)
  • 前端js如何实现截屏功能,插件推荐js-web-screen-shot

    读取dom结构转换成canvas,最后转成图片形式展示 缺点 :没有编辑功能 链接:html2canvas 大佬模仿qq截图实现的,也可以搭配webrtc实现web端远程桌面共享 链接: github gitee 简单使用 注意点:

    2024年02月06日
    浏览(45)
  • 前端插件库之vue3使用vue-codemirror插件

    基于 CodeMirror ,适用于 Vue 的 Web 代码编辑器。 1.命令行安装 如果运行官网例子时, 报错: 可以在终端中安装对应文件, 解决问题 2.在需要的组件中配置 代码编辑区 支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换 不足, 没有满足代码提示 组件代码 vue3 新手作品

    2024年02月04日
    浏览(48)
  • echarts雷达图图例自定义以及tooltip动态展示一维数据

     实现效果: 虽然上面实现了图例自定义,但是仔细看会发现图例与文字不在一条水平线上,利用富文本配置,对height进行调整,实现图例图片与文字对齐。 实现效果: 官方文档中默认显示该维度的所有数据 而遇到的需求是显示鼠标悬浮该轴的数据对比 实现:   虽然实现

    2024年02月16日
    浏览(39)
  • 小程序中使用echarts,案例一:实现蜘蛛网(雷达图)

    echarts-for-weixin 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。 echarts-for-weixin ec-canvas 如果你想使用最新版本的echarts可以将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用自定义构建生成并替换 echarts.js。需要注意的是新

    2024年02月03日
    浏览(31)
  • 百度语音识别(语音转文字)vue版本 前端(后端需要做个请求转发即可)

    这个项目需要用到语音识别,最后选择的是百度语音识别。原因第一是项目中用到的地方不大,属于微型和小型功能点,第二就是属于临时增加的需求,没有太多的时间去开发,第三就是后端对于自主开发语音识别觉得较为困难,浪费时间。 加载语音识别的文件 下载recorde

    2024年02月12日
    浏览(53)
  • 【Vue 插件篇】粘贴板插件 clipboard.js 与 原生JS中的复制、剪切、粘贴

    在前端项目开发过程中,文本的复制粘贴功能经常会被用到。如上图,将列表中的链接地址进行复制,到浏览器中粘贴打开。再或者一些网站上,通过按钮粘贴输入框中的代码的功能等等。今天,我们就来讲一下,Vue 项目中用于复制的一个插件 clipboard。 clipboard官网 数字化管

    2024年01月19日
    浏览(73)
  • Vue xlsx插件前端导出

    一、安装 xlsx 二、具体使用整体代码 如果数据格式是这样就用下面的,直接把数据传到 XLSX.utils.json_to_sheet

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包