海外网站seo优化,南通专业做网站公司,wordpress表格样式插件,wordpress update_option目录 由来
效果图
echarts官网找相似图
将南丁格尔玫瑰图引进html页面中
引入echarts
准备容器
初始化echarts实例对象
指定配置项和数据#xff08;官网给的option#xff09;
将配置项给echarts
自定义南格丁尔玫瑰图
修改颜色
修改玫瑰图大小
修改图的模式为半…目录 由来
效果图
echarts官网找相似图
将南丁格尔玫瑰图引进html页面中
引入echarts
准备容器
初始化echarts实例对象
指定配置项和数据官网给的option
将配置项给echarts
自定义南格丁尔玫瑰图
修改颜色
修改玫瑰图大小
修改图的模式为半径模式
数据更换 由来
南丁格尔玫瑰图是弗罗伦斯·南丁格尔所发明的。又名为极区图。是一种圆形的直方图。 南丁格尔自己常昵称这类图为鸡冠花图coxcomb并且用以表达军医院季节性的死亡率对象是那些不太能理解传统统计报表的公务人员。
效果图 echarts官网找相似图
我们从echarts官网找到相似图形 将南丁格尔玫瑰图引进html页面中
下载echarts
引入echarts
注意这里是本人引入的路径因人而异路径问题注意一下
script src./js/echarts.min.js/script
准备容器
div classbox stylewidth: 500px; height: 500px; border: 1px solid gainsboro; margin: 100px auto;/div
初始化echarts实例对象
const mycharts echarts.init(document.querySelector(.box))
指定配置项和数据官网给的option const mycharts echarts.init(document.querySelector(.box))option {legend: {top: bottom},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: Nightingale Chart,type: pie,radius: [50, 250],center: [50%, 50%],roseType: area,itemStyle: {borderRadius: 360},data: [{ value: 40, name: rose 1 },{ value: 38, name: rose 2 },{ value: 32, name: rose 3 },{ value: 30, name: rose 4 },{ value: 28, name: rose 5 },{ value: 26, name: rose 6 },{ value: 22, name: rose 7 },{ value: 18, name: rose 8 }]}]
};
将配置项给echarts
myChart.setOption(option)
引入自己的页面成功 自定义南格丁尔玫瑰图
将图修成自己想要的样子
修改颜色
color数组中放入自己想要定义的颜色
color: [#006cff, #60cda0, #ed8884, #ff9f7f, #0096ff, #9fe6b8, #32c5e9, #1d9dff],
直接放在option中 修改玫瑰图大小
在刚才的option中找到radiusradius用来修改图的大小
radius: [10%, 70%], 修改图的模式为半径模式
在刚才的option中找到roseType
roseType: radius,
数据更换
在option中找到series对象 自定义 data对象
前面的value的数值代表了每一格图的大小 { value: 40, name: 南 },{ value: 40, name: 丁 },{ value: 40, name: 格 },{ value: 40, name: 尔 },{ value: 40, name: 玫 },{ value: 40, name: 瑰 },{ value: 40, name: 图 },{ value: 40, name: } 在option中找到series对象 itemStyle里面的 borderRadius borderRadius: 360 这样就完成了南丁格尔玫瑰图
