/**
* 统计图模块
*/
var getCommon = {
/**
* 横着立体柱状图模块
* @param {Object} dom
* @param {Object} yData y轴刻度标签
* @param {Object} sData 数据
* @param {Object} option
*/
zhu: function(dom, yData, sData, option) {
var myChart = echarts.init(dom);option = {
// title: {
// text: '标题'
// },
grid: {
top: '10%',
left: '10%',
right: '4%',
bottom: '10%',
containLabel: true //防止标签溢出
},
xAxis: {
show: false,
axisLabel: {
fontSize: 12
}
},
yAxis: {
type: 'category', //坐标轴类型。
inverse: true, //是否是反向坐标轴。
data: [], //x轴刻度标签
axisLine: {
show: false //是否显示坐标轴轴线;不包括数据标签
},
axisTick: {
show: false //是否显示坐标轴刻度。
},
axisLabel: {
color: "pink",
}
},
series: [
//柱体
{
name: '',
type: 'bar',
// data: [1030, 205, 84, 568, 689],
// barGap: '200%',//不同系列的柱间距离,为百分比,(柱子宽度的百分比)
// barCategoryGap:'400',//同一系列的柱间距离,默认为类目间距的20%,可设固定值
barWidth: 20, // 柱体宽度
itemStyle: {
"normal": {
"color": new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: "rgba(89,211,255,0.1)" //0.1是透明度
},
{
offset: 1,
color: "rgba(23,237,194,0.8)" //1是透明度
}
],
false
),
}
},
label: { //图形上的文本标签
normal: {
show: true,
color: "pink",
position: "right", //
formatter: "{c}", //字符串模板,{a}:系列名。{b}:数据名。{c}:数据值。
distance: 10 //距离图形元素的距离。
},
fontSize: 12
}
},
//柱顶圆片
{
name: "",
// data: [1030, 205, 84, 568, 689],
type: "pictorialBar", //象形柱图
symbolSize: [8, 20], //调整截面形状[宽, 高]
symbolOffset: [5, 0], //相对于柱体的截面位置
symbolPosition: "end", //图形的定位位置,'end':图形边缘与柱子结束的地方内切。
z: 12,
"itemStyle": {
"normal": {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(89,211,255,1)"
},
{
offset: 1,
color: "rgba(23,237,194,1)"
}
],
false
),
}
},
}
]
};
console.log(option.yAxis)
option.yAxis.data = yData //Y轴刻度标签
console.log(option.yAxis.data)
option.series[0].data = sData //柱状图数据
option.series[1].data = sData
// option.series[0].label.fontSize=updataData.labelFontSize
// console.log(option.xAxis)
myChart.setOption(option);
// 让图表的大小根据浏览器变化
window.addEventListener('resize', function() {
myChart.resize();
});},
/**
* 纵着显示立体柱状图
* @param {Object} dom
* @param {Object} xData x轴刻度标签
* @param {Object} sData数据
* @param {Object} option
*/
zhuZong: function(dom, xData, sData, option) {
var myChart = echarts.init(dom);
option = {
grid: {
// top: '10%',
left: '4%',
right: '4%',
bottom: '10%',
containLabel: true //防止标签溢出
},
xAxis: {
type: 'category',
// data: [],
axisTick: {
show: false //是否显示坐标轴刻度。
},
axisLabel: {
color: "pink",
fontSize: 12, //x轴刻度标签的字体大小
},
},
yAxis: {
show: false,
axisLine: {
show: false //是否显示坐标轴轴线;不包括数据标签
}
},
series: [
//柱体
{
name: '',
type: 'bar',
data: [1030, 205, 84, 568, 689],
barWidth: 20, // 柱体宽度
itemStyle: {
"normal": {
"color": new echarts.graphic.LinearGradient(1, 1, 0, 0,
[{
offset: 0,
color: "rgba(89,211,255,0.1)" //0.1是透明度
},
{
offset: 1,
color: "rgba(23,237,194,0.8)" //1是透明度
}
],
false
),
}
},
label: { //图形上的文本标签
normal: {
fontSize: 12, //文字大小
show: true,
color: "pink",
position: "top", //
formatter: "{c}", //字符串模板,{a}:系列名。{b}:数据名。{c}:数据值。
distance: 10 //距离图形元素的距离。
}
}
},
//柱顶圆片
{
name: "",
data: [1030, 205, 84, 568, 689],
type: "pictorialBar", //象形柱图
symbolSize: [20, 8], //调整截面形状[宽, 高]
symbolOffset: [0, -5], //相对于柱
echarts自定义封装js【柱状图,折线图,水球,雷达,仪表盘】以上图表的各种问题,几乎都有,没有的评论区留言
转载请注明出处或者链接地址:https://www.qianduange.cn//article/20126.html
相关文章
-
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
-
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
-
【html】新建一个html并且在浏览器运行
-
SSM基于html的网上购物系统2nluo 在线充值
-
html 无序标签有序标签及表单
-
CSS3新增属性(15个案例 代码 效果图 素材)
-
com.google.gson.JsonSyntaxException: IllegalStateException: Expected BEGIN_OBJECT but was STRING at
-
python requests编写 api接收json
-
H5 CSS3-移动端兼容/调试/视口/flex布局
-
如何让CSS只在当前组件中起作用
发布的文章
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
2024-10-30 21:10:12
基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统
2024-11-10 09:11:04
基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务
2024-11-10 09:11:50
HTML5风水研究会网站模板:自适应布局学习案例
2024-11-10 09:11:48
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
2024-11-10 09:11:32
HTML/SSM-实验室预约管理系统-99299(免费领源码 开发文档)可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案
2024-11-10 09:11:16
【简单html静态网页代码】 制作一个简单HTML宠物网页(HTML CSS)
2024-11-10 09:11:06
模仿电影中黑客电脑界面,html装逼代码
2024-11-10 09:11:04
【html】新建一个html并且在浏览器运行
2024-11-10 09:11:58
SSM基于html的网上购物系统2nluo 在线充值
2024-11-10 09:11:24
大家推荐的文章