共计 5556 个字符，预计需要花费 14 分钟才能阅读完成。
/**
* 统计图模块
*/
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【柱状图，折线图，水球，雷达，仪表盘】以上图表的各种问题，几乎都有，没有的评论区留言
