<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
如何利用echarts畫雷達圖和折柱混合
2022-04-07 13:00:25
導語
通常在根據設計圖寫echarts的時候，很多效果是官方範例裡沒有的，我在程式碼里加上了一些常用的效果，並做了註釋。
雷達圖
var option = {
radar: [{
//資料名稱
indicator: [{
text: 'AIS未登記'
},
{
text: '巡邏發現'
},
{
text: '群眾舉報'
},
{
text: '其他'
},
{
text: '雷達發現'
}
],
center: ['50%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
axisName: {
formatter: '【{value}】',
color: '#428BD4'//顏色
},
splitArea: {
areaStyle: {
color: ['#7BD685', '#34B54B', '#70DEB3', '#4FC7A0'], //內部圈圈的顏色
shadowColor: 'rgba(0, 0, 0, 0.1)', //內部線的顏色
shadowBlur: 10
}
},
//線顏色
axisLine: {
lineStyle: {
color: '#428BD4'
}
},
splitLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
}
}],
//滑鼠放上懸浮展示的內容
tooltip: {
trigger: 'item'
},
series: [{
name: '表特徵分佈',
type: 'radar',
symbol: 'circle', //拐點樣式
symbolSize: 6, // 拐點的大小
emphasis: {
lineStyle: {
width: 4
}
},
data: [{
value: [60, 5, 1, 1, 1500],
name: '',
areaStyle: {
color: '#C1BFA1'
}
}
]
}]
};
var myChartecharts = echarts.init(document.getElementById('btzfb'));
myChartecharts.setOption(option);效果
折柱圖
//
var optionbdtj = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
title: {},
legend: {
data: ['系統預警', '線下發現', '數量變動'],
textStyle: {
color: '#7A7A7A'
},
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#C3DCEA",
width: 1 //這裡是為了突出顯示加上的
}
},
axisLabel: {
textStyle: { //改變xy軸上文字的顏色
color: "#75B4FC"
}
}
}],
yAxis: [{
type: 'value',
name: '單位（艘）',
min: 0,
max: 1000,
interval: 200,
axisLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#E5F0F6",
width: 1 //這裡是為了突出顯示加上的
}
},
axisLabel: {
formatter: '{value} ',
color: '#B7B7B7'
},
splitLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#E5F0F6",
width: 1 //這裡是為了突出顯示加上的
}
},
nameTextStyle: {
color: '#B7B7B7'
}
},
{
type: 'value',
name: '單位（%）',
min: 0,
max: 100,
interval: 20, //間隔數
axisLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#E5F0F6",
width: 1 //這裡是為了突出顯示加上的
}
},
axisLabel: {
formatter: '{value} ',
color: '#B7B7B7'
},
splitLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#E5F0F6",
width: 1 //這裡是為了突出顯示加上的
}
},
nameTextStyle: {
color: '#B7B7B7'
}
}
],
series: [{
name: '系統預警',
type: 'bar',
barWidth: 15, // 柱子寬度
tooltip: {
valueFormatter: function(value) {
return value + ' ';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#96DBCA'
},
{
offset: 0.5,
color: '#6EC9C6'
},
{
offset: 1,
color: '#43B6C3'
}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#96DBCA'
},
{
offset: 0.7,
color: '#6EC9C6'
},
{
offset: 1,
color: '#43B6C3'
}
])
}
},
data: [600, 400, 700, 230, 250, 760, 135, 162, 320, 200, 600, 300]
},
{
name: '線下發現',
type: 'bar',
barWidth: 15, // 柱子寬度
tooltip: {
valueFormatter: function(value) {
return value + ' ';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FEC52F'
},
{
offset: 0.5,
color: '#FEB32C'
},
{
offset: 1,
color: '#FE9F29'
}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FEC52F'
},
{
offset: 0.7,
color: '#FEB32C'
},
{
offset: 1,
color: '#FE9F29'
}
])
}
},
data: [200, 200, 300, 400, 600, 100, 200, 230, 230, 160, 120, 610]
},
{
name: '數量變動',
type: 'line',
symbolSize: 8, //實心大小
symbol: 'circle', //實心
yAxisIndex: 1,
lineStyle: {
width: 3,
shadowColor: 'rgba(0, 216, 255, 1)', //陰影
shadowBlur: 8,
shadowOffsetY: 2
},
tooltip: {
valueFormatter: function(value) {
return value + ' ';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#14D8FD'
},
{
offset: 0.5,
color: '#14D8FD'
},
{
offset: 1,
color: '#14D8FD'
}
])
},
data: [65, 46, 83, 57]
}
]
};
var myChartbdtj = echarts.init(document.getElementById('bdtj'));
myChartbdtj.setOption(optionbdtj);效果
總結
到此這篇關於如何利用echarts畫雷達圖和折柱混合的文章就介紹到這了,更多相關echarts雷達圖和折柱混合內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45