如何利用echarts畫雷達(dá)圖和折柱混合
更新時(shí)間：2022年04月07日 11:39:05 作者：啾啾哼
最近使用echarts做的一個(gè)H5的成績數(shù)據(jù)報(bào)告,里面使用了雷達(dá)圖已經(jīng)折線圖和柱狀圖,下面這篇文章主要給大家介紹了關(guān)于如何利用echarts畫雷達(dá)圖和折柱混合的相關(guān)資料,需要的朋友可以參考下
導(dǎo)語
通常在根據(jù)設(shè)計(jì)圖寫echarts的時(shí)候，很多效果是官方實(shí)例里沒有的，我在代碼里加上了一些常用的效果，并做了注釋。
雷達(dá)圖
var option = {
radar: [{
//數(shù)據(jù)名稱
indicator: [{
text: 'AIS未登記'
},
{
text: '巡邏發(fā)現(xiàn)'
},
{
text: '群眾舉報(bào)'
},
{
text: '其他'
},
{
text: '雷達(dá)發(fā)現(xiàn)'
}
],
center: ['50%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
axisName: {
formatter: '【{value}】',
color: '#428BD4'//顏色
},
splitArea: {
areaStyle: {
color: ['#7BD685', '#34B54B', '#70DEB3', '#4FC7A0'], //內(nèi)部圈圈的顏色
shadowColor: 'rgba(0, 0, 0, 0.1)', //內(nèi)部線的顏色
shadowBlur: 10
}
},
//線顏色
axisLine: {
lineStyle: {
color: '#428BD4'
}
},
splitLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
}
}],
//鼠標(biāo)放上懸浮展示的內(nèi)容
tooltip: {
trigger: 'item'
},
series: [{
name: '表特征分布',
type: 'radar',
symbol: 'circle', //拐點(diǎn)樣式
symbolSize: 6, // 拐點(diǎn)的大小
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: ['系統(tǒng)預(yù)警', '線下發(fā)現(xiàn)', '數(shù)量變動(dòng)'],
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, //間隔數(shù)
axisLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#E5F0F6",
width: 1 //這里是為了突出顯示加上的
}
},
axisLabel: {
formatter: '{value} ',
color: '#B7B7B7'
},
splitLine: {
lineStyle: { //改變xy軸線條的顏色
color: "#E5F0F6",
width: 1 //這里是為了突出顯示加上的
}
},
nameTextStyle: {
color: '#B7B7B7'
}
}
],
series: [{
name: '系統(tǒng)預(yù)警',
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: '線下發(fā)現(xiàn)',
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: '數(shù)量變動(dòng)',
type: 'line',
symbolSize: 8, //實(shí)心大小
symbol: 'circle', //實(shí)心
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);效果
總結(jié)
到此這篇關(guān)于如何利用echarts畫雷達(dá)圖和折柱混合的文章就介紹到這了,更多相關(guān)echarts雷達(dá)圖和折柱混合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript中的函數(shù)模式詳解,本文講解了創(chuàng)建函數(shù)的語法、函數(shù)表達(dá)式、命名函數(shù)表達(dá)式、函數(shù)的聲明、函數(shù)聲明與表達(dá)式、函數(shù)的提升、即時(shí)函數(shù)模式等內(nèi)容,需要的朋友可以參考下2015-02-02
Node.js逐漸升溫，很多朋友已經(jīng)開始關(guān)注。但是在Windows平臺(tái)上需要基于Cygwin安裝配置環(huán)境，讓很多人望而卻步。2011-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件實(shí)現(xiàn)單選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了JavaScript中清空數(shù)組的三種方式。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
bootstrap-table+treegrid實(shí)現(xiàn)樹形表格
這篇文章主要為大家詳細(xì)介紹了bootstrap-table+treegrid實(shí)現(xiàn)樹形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問題
這篇文章主要介紹了如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問題。SyntheticEvent對(duì)象是通過合并得到的。 這意味著在事件回調(diào)被調(diào)用后，SyntheticEvent 對(duì)象將被重用并且所有屬性都將被取消。 因此，您無法以異步方式訪問該事件。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)異形輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
使用canvas及js簡(jiǎn)單生成驗(yàn)證碼方法
在很多時(shí)候都需要用到驗(yàn)證碼，前端驗(yàn)證碼需要知道Html5中的canvas知識(shí)點(diǎn)。驗(yàn)證碼生成步驟是：1.生成一張畫布canvas 2.生成隨機(jī)數(shù)驗(yàn)證碼 3.在畫布中生成干擾線 4.把驗(yàn)證碼文本填充到畫布中 5.點(diǎn)擊畫布更換驗(yàn)證碼2017-04-04
微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
斐波那契是自然界與社會(huì)中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01