/**
* 统计图模块
*/
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
相关文章
-
鸿蒙HarmonyOS 5.0开发:应用配置文件(Stage模型)-app.json5配置文件
-
记一次 npm cache clean --force 时报错 Your cache folder contains root-owned files, due to a bug in...的解决方案
-
Node.js | npm下载安装及环境配置教程
-
node还在,npm丢了?
-
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
-
解决使用nvm管理node版本时提示npm下载失败的问题
-
【Vue框架】用 Vue 的时候应该选 JS 还是 TS?全面解析与实用建议
-
2024 前端技术盘点:React、Vue、Qwik 谁能领跑 2025?
-
vue遍历数组的常用方法
-
58.在 Vue 3 中使用 OpenLayers 绘制点、线、圆、多边形
发布的文章
【Qt开发教程】JSON处理QJsonDocument、QJsonObject、QJsonArray类详解及实战应用:用于解析JSON数据字符串,转换为Qt对象,转换Qt对象为JSON格式字符串
2025-02-22 16:02:22
浅谈C#库之Newtonsoft.Json
2025-02-22 16:02:22
第十天:数据提取-JsonPath
2025-02-22 16:02:21
【漏洞复现】5. Fastjson 1.2.24反序列化漏洞(CVE-2017-18349)复现
2025-02-22 16:02:21
Linux网络 | 网络计算器客户端实现与Json的安装以及使用
2025-02-22 16:02:20
解决docker不加载 /etc/docker/daemon.json文件的问题
2025-02-22 16:02:19
nlohmann/json安装与使用
2025-02-22 16:02:19
mapbox基础,使用geojson加载line线图层,实现纯色填充、图片填充、虚线和渐变效果
2025-02-22 16:02:18
鸿蒙HarmonyOS 5.0开发:应用配置文件(Stage模型)-app.json5配置文件
2025-02-22 16:02:18
记录小白C 学习之路--熟悉C VScode的json配置文件篇
2025-02-22 16:02:17
大家推荐的文章