/**
* 统计图模块
*/
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
相关文章
-
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
-
前端提高篇(102):jQuery高级方法callbacks、deferred
-
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
-
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
-
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
-
JQuery中的load()、$
-
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
-
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
-
【html】新建一个html并且在浏览器运行
-
SSM基于html的网上购物系统2nluo 在线充值
发布的文章
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
2024-08-27 09:08:17
前端提高篇(102):jQuery高级方法callbacks、deferred
2024-05-09 11:05:34
解决npm install 报错 “npm err code 1“
2024-06-06 10:06:47
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
2024-04-22 09:04:34
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
2024-03-29 15:03:20
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
2024-04-20 17:04:38
JQuery中的load()、$
2024-05-10 08:05:15
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
2024-10-30 21:10:12
大家推荐的文章