本篇内容主要讲解“怎么利用echarts画雷达图和折柱混合”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么利用echarts画雷达图和折柱混合”吧!
导语
通常在根据设计图写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画雷达图和折柱混合”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
