雷达图的自定义点样式与渐变背景色

1、首先通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

2、然后准备一个具备高宽的 DOM 容器。

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

3、通过 echarts.init 方法初始化 echarts 实例并通过 setOption 方法生成一个基础雷达图，下面是完整代码。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '基础雷达图'},tooltip: {},legend: {data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']},radar: {axisLine: {//自定义点样式，引入本地图片symbol: ['none', 'image://jz.png']},splitArea: {//设置渐变背景色areaStyle: {color: ['rgba(11,89,140,1)','rgba(11,89,140,0.8)','rgba(11,89,140,0.6)','rgba(11,89,140,0.4)','rgba(11,89,140,0.2)'],shadowColor: 'rgba(0,0,0,0.3)',shadowBlur: 10}},name: {textStyle: {color: '#fff',backgroundColor: '#999',borderRadius: 3,padding: [3, 5]}},indicator: [{ name: '销售（sales）', max: 6500 },{ name: '管理（Administration）', max: 16000 },{ name: '信息技术（Information Techology）', max: 30000 },{ name: '客服（Customer Support）', max: 38000 },{ name: '研发（Development）', max: 52000 },{ name: '市场（Marketing）', max: 25000 }]},series: [{name: '预算 vs 开销（Budget vs spending）',type: 'radar',// areaStyle: {normal: {}},data: [{value: [4300, 10000, 28000, 35000, 50000, 19000],name: '预算分配（Allocated Budget）'}]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

4、效果图

雷达图自定义点样式渐变背景色相关推荐

【JFreeChart】自定义蜘蛛网图生成带刻度三角雷达图自定义文字风格背景色
工作中需要生成PDF 且包含图表.iText 或其他可以访问网页地址转PDF.但是效果不是特别理想.故用iText代码方式实现生成PDF.奈何图表又是一个问题(还是个三角形的雷达图).Java端生成 ...
03 【eCharts样式定制系列】雷达图自定义面积覆盖颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
Echarts雷达图自定义样式
效果图: setLeiDaChart(){let myChart = this.$echarts.init(document.getElementById('andonType'));let opti ...
echarts雷达图自定义射线颜色、边框效果和背景样式
目录 1.在官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比 1.在官网找样例样例地址:Examples - Apache ECharts 2.初 ...
【LVGL】设置对象样式 - 渐变背景色
LVGL提供设置对象渐变背景色的功能,渐变色是由color1渐变为color2,而color1是对象的background color,而color2则是通过lv_style_set_bg_grad_ ...
雷达图自定义各点颜色
methods:{transform:function(e){switch (e){case '风速':return 'windspeed';case '风向':return 'winddirecti ...
echarts雷达图线的样式_echarts 雷达图的个性化设置
functiontest() { let myChart= echarts.init(document.getElementById('levelImage')); myChart.setOption ...
Echarts 实现折线图自定义折点样式
<script>....export default {name: "LineChart",...data:function () {return{series:[]} ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...

雷达图自定义点样式渐变背景色

雷达图的自定义点样式与渐变背景色

雷达图自定义点样式渐变背景色相关推荐

最新文章

热门文章

雷达图 自定义点样式 渐变背景色

雷达图的自定义点样式与渐变背景色

雷达图 自定义点样式 渐变背景色相关推荐

最新文章

热门文章

雷达图自定义点样式渐变背景色

雷达图自定义点样式渐变背景色相关推荐