vue3.0-echarts@5.0 - 旭日图+bar图 实现 小太阳
本文的源码直接戳文章最后，关注公众号，戳同样标题的文章，可获得下载链接。
先来看一下成品图：
gif 使用的生成工具，地址戳这里https://dongci.kawo.com/?iao.su
这个图表的应用场景，我个人会偏向用于：事件总集的时候，以月份划分，可以用在移动端或者PC端，也可以加入 时间表盘 的概念。
进入正题
这个小太阳图是一个 极坐标bar图 + 旭日图 的合成图。
既然我们能拆成这两种图表类型，那就可以直接开始做，先分别来实现一个旭日图和极坐标bar图。
接下来先进行前期的安装及挂载准备
npm install echartsnpm install vue-echarts// main.js引入挂载：
import { createApp } from "vue";
import App from "./App.vue";
import ECharts from 'vue-echarts'
import { use } from "echarts/core";// 手动引入 ECharts 各模块来减小打包体积
import {CanvasRenderer
} from 'echarts/renderers'
import {TooltipComponent,
} from 'echarts/components'use([CanvasRenderer,TooltipComponent,
])const app = createApp(App)
app.mount("#app");// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)
旭日图配置：
option: {backgroundColor:"rgba(255,255,255,0)",toolbox: {feature: {saveAsImage: {},},},series: {type: "sunburst",data: data, // 数据此处省略，可以关注公众号获取本文源码 radius: [0, "95%"],sort: undefined,emphasis: {focus: "ancestor",},levels: [{},{r0: "15%",r: "35%",itemStyle: {borderWidth: 2,},label: {rotate: "tangential",},},{r0: "35%",r: "70%",label: {align: "right",},},],},},极坐标bar图配置：
option: {toolbox: {feature: {saveAsImage: {},},},grid: {show: false,top: 100,},angleAxis: {show: false,type: "category",data: cities,},tooltip: {show: true,formatter: function (params) {const id = params.dataIndex;return (cities[id] + "<br>Lowest：" + data[id][0] + "<br>Highest：" + data[id][1]);},},radiusAxis: {// show: false,},polar: {},series: [{type: "bar",itemStyle: {color: "transparent",},data: data.map(function (d) {return d[0];}),coordinateSystem: "polar",stack: "Min Max",silent: true,},{type: "bar",data: data.map(function (d) {return d[1] - d[0];}),coordinateSystem: "polar",name: "Range",stack: "Min Max",},{type: "bar",itemStyle: {color: "transparent",},data: data.map(function (d) {return d[2] - barHeight;}),coordinateSystem: "polar",stack: "Average",silent: true,z: 10,},],},两种图表结合后的绘制如下：
<v-chartclass="chart"autoresize:ref="refName"@mouseover="handlerMouseover"@mouseout="handlerMounseout"@click="handlerClick"/> -------------JS-----------
option: {toolbox: {feature: {saveAsImage: {},},},grid: {top: 100,},angleAxis: {show: false,type: "category",data: lodash.uniq(lodash.map(new_data, "name")),},tooltip: {show: true,formatter: function (params) {const id = params.dataIndex;return `${params.name}：${new_data[id].value}`;},},radiusAxis: {show: false,},polar: {},series: [{type: "sunburst",data: sunburst_data,radius: [0, "95%"],sort: undefined,nodeClick: false,emphasis: {focus: "ancestor",},levels: [{},{r0: "10%",r: "20%",itemStyle: {borderWidth: 2,},label: {rotate: "tangential",},},],},{type: "bar",itemStyle: {color: "transparent",},data: lodash.map(new_data, "start"),coordinateSystem: "polar",stack: "Min Max",silent: true,},{type: "bar",data: new_data,coordinateSystem: "polar",name: "Range",stack: "Min Max",},],},大家可以主要到 gif 动图中，鼠标悬浮在一级菜单时，是有交互的，这个交互需要用 JS来写，不能直接通过 echarts 的属性来进行操作配置。逻辑代码如下：
const handlerMouseover = (e) => {if (e.seriesType === "sunburst") {handlerMounseout();lodash.map(lodash.filter(new_data, function (o) {return o.type !== e.name;}),function (d) {d.itemStyle.opacity = 0.5;});dom.setOption(addData.option, true);}};const handlerMounseout = (e) => {lodash.map(new_data, function (a) {a.itemStyle.opacity = 1;});dom.setOption(addData.option, true);};---------------说点题外话-----
echarts 是比较容易上手的做图表可视化的工具，很多日常常用的图表都可以满足，当然需要创造性地图表的话，可以用 D3 来做。
公众号放在下面啦，欢迎多多关注呀~
vue3.0-echarts@5.0 - 旭日图+bar图 实现 小太阳相关推荐
- echart旭日图_海报级设计感的旭日图，就在 ECharts 4.0
2018 年 1 月 16 日 ECharts 发布了 4.0,其中包括一种新的图表系列--旭日图. 普通旭日图: 文艺旭日图: 2B 旭日图--这货真的长得像个旭日啊 щ(ﾟДﾟщ): 可能大家印象 ...
- 《Python数据可视化之Matplotlib与Pyecharts》之旭日图
11.6.2 绘制我的家庭树旭日图 为了分析我的家庭的人员相互关系,绘制了我的家庭树旭日图,Python代码如下: # -*- coding: utf-8 -*- #声明Notebook类型,必须在 ...
- echart旭日图_基于Echarts4.0实现旭日图
昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明: 1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级的数据量 2.针对移动端优化,移动端小屏 ...
- Echarts——旭日图
旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. 引入相关文件 旭日图是 EChar ...
- echart旭日图_旭日图(echarts)
旭日图 var dataL1 = []; var dataL2 = []; var data1 = []; for (var i = 0; i <= 60; i++) { dataL1.push ...
- ECharts - 15.旭日图
旭日图 旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点.因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系. 引入相关文件 旭日图是 EChar ...
- Echarts绘制差异代谢产物分类与KEGG通路分类的旭日图
文章目录 前言 数据准备工作 绘图 excel旭日图的绘制 ECharts旭日图的绘制 ECharts旭日图 菜鸟编辑器修改后的旭日图 附演示代码 前言 整理实验数据,进行可视化,旭日图有利于简洁明了 ...
- 图表 Echarts 3.0 简单使用
2019独角兽企业重金招聘Python工程师标准>>> Echarts(Enterprise Charts) 3.0 介绍 ECharts,一个纯 Javascript 的图表库,可 ...
- echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?
1. 怎么让ECharts的提示框tooltip自动轮播? 在用ECharts做大屏或者可视化展示项目的时候,让提示框tooltip自动轮播是比较常见的需求,给大家推荐一个插件叫echarts-too ...
最新文章
- 云优后台提交显示parsererror_【Shopee新手开店】卖家后台管理及设置
- 编程之美：编程判断两个链表是否相交
- U盘安装Centos7.0图解
- 如何按多个列对数据框进行排序
- AJAX GET的请求
- Android-使用AIDL进程间通信
- 【tyvj3303】连接格点，区分多维与单维很关键
- 利用ptrace和memfd_create混淆程序名和参数
- redis映射的概念_Redis基础概念和实现机制的总结
- LINUX中用C获得当前执行应用的所在路径
- Android 滑动放大,Android多点触控实现对图片放大缩小平移，惯性滑动等功能
- 移动端 php 开源,poscms移动端地址函数
- Windows资源管理器未响应解决方案
- 密码学系列之九：密钥管理
- 杰里之AC695N/AC696N 蓝牙耳机PCB LAYOUT 说明【篇3】
- Pytest注册使用自定义mark标签
- RGB888 和 RGB565
- 3D分析之可见性分析工具
- 《人力资源管理概论》
- 这是一个神奇（神器）的网站