/**
* 统计图模块
*/
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
发布的文章
前端:HTML
2025-02-23 11:02:50
打造CSS3动态风水罗盘旋转特效
2025-02-23 11:02:49
.net winform 实现CSS3.0 泼墨画效果
2025-02-23 11:02:48
CSS3快速入门
2025-02-23 11:02:48
前端实战2024】Vue2打造科技风个人博客:完整项目从设计到部署 【前端入门必看】Vue2 CSS3开发炫酷博客网站:新手也能快速上手的实战教程 【Vue2项目实战】90分钟从零开发现代科技风博客:
2025-02-23 11:02:48
轻松掌握CSS3最重要的弹性盒子模型(伸缩盒子模型)
2025-02-23 11:02:47
【前端入门必看】手把手带你打开前端的大门(涵盖HTML,CSS3,JS)
2025-02-23 11:02:47
CSS3——transform属性
2025-02-23 11:02:46
css使用伪类元素 实现 卡券圆角 虚线
2025-02-23 11:02:45
React【vite使用模块化css】
2025-02-23 11:02:44
大家推荐的文章