javascript
复制代码
barChar() {
var chartDom = document.getElementById("barChar");
var myChart = echarts.init(chartDom);
var option;
option = {
// 绘制图表{
// 设置图表的位置
grid: {
x: 5, // 左间距
y: 50, // 上间距
x2: 5, // 右间距
y2: 0, // 下间距
containLabel: true, // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
},
// dataZoom 组件 用于区域缩放
dataZoom: [
{
type: "inside",
xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x轴
// 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
start: 0,
end: 100,
},
],
// 图表主标题
title: {
text: "单位 / %", // 主标题文本，支持使用 \n 换行
top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分
textStyle: {
// 文本样式
fontSize: 12,
color: "#666",
},
},
// 设置自定义文字
graphic: [
{
type: "text", // 图形元素类型
left: 70, // 进行定位
bottom: 0,
style: {
// 文本样式
fill: "#cdd3ee",
},
},
],
// 图例组件
legend: {
// 图例的数据数组
data: [],
icon: "roundRect", // 图例项的 icon 值: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: 13, // 定位
right: 30,
textStyle: {
// 文本样式
fontSize: 12,
color: "#cdd3ee",
},
},
// X轴
xAxis: {
type: "category", // 坐标轴类型, 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
data: ["小学", "初中", "高中"],
// 坐标轴轴线
axisLine: {
lineStyle: {
type: "solid", // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
width: 1, // 坐标轴线线宽, 不设置默认值为 1
color: "#204756", // 坐标轴线线的颜色
},
},
// 坐标轴刻度
axisTick: {
show: true,
},
// 分隔线
splitLine: {
show: false,
},
// 坐标轴刻度标签
axisLabel: {
fontSize: 12, // 文字的字体大小
color: "#666", // 刻度标签文字的颜色
// 使用函数 只显示数字 传入的数据值 -> value: number|Array,
// formatter: function (value) {
// return value.replace(/[\u4e00-\u9fa5]/g, '')
// }
},
},
// 左侧Y轴
yAxis: [
{
type: "value", // 坐标轴类型, 'value' 数值轴，适用于连续数据
name: "", // 坐标轴名称
nameLocation: "end", // 坐标轴名称显示位置 'start', 'middle' 或者 'center', 'end'
nameTextStyle: {
// 坐标轴名称的文字样式
color: "#ccc",
fontSize: 12,
},
nameGap: 18, // 坐标轴名称与轴线之间的距离
// 坐标轴刻度
axisTick: {
show: false, // 是否显示坐标轴刻度 默认显示
},
// 坐标轴轴线
axisLine: {
// 是否显示坐标轴轴线 默认显示
show: false, // 是否显示坐标轴轴线 默认显示
lineStyle: {
// 坐标轴线线的颜色
color: "#ccc",
},
},
// 坐标轴在 grid 区域中的分隔线
splitLine: {
show: true, // 是否显示分隔线，默认数值轴显示
lineStyle: {
color: "#ccc", // 分隔线颜色
opacity: 0.1, // 分隔线透明度
},
},
// 坐标轴刻度标签
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
fontSize: 12, // 文字的字体大小
color: "#666", // 刻度标签文字的颜色
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: "{value}",
},
},
],
// 系列列表
series: [
// 柱状图顶部的圆片
{
name: "订单", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "pictorialBar", // 系列类型
symbolSize: [20, 10], // 标记的大小
symbolOffset: [0, -5], // 标记相对于原本位置的偏移
symbolPosition: "end", // 图形的定位位置。可取值：start、end、center
// 图例的图形样式
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(2, 208, 234, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(24, 155, 245, 1)", // 100% 处的颜色
},
],
},
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [32.3, 64.5, 78.6], // 系列中的数据内容数组
},
// 柱状图
{
name: "", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "bar", // 系列类型
barWidth: 20, // 指定柱宽度，可以使用绝对数值或百分比，默认自适应
barGap: "-100%", // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
// 图例的图形样式
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(14, 96, 178, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(31, 174, 222, 1)", // 100% 处的颜色
},
],
},
},
data: [32.3, 64.5, 78.6], // 系列中的数据内容数组
},
// 柱状图底下的圆片
{
name: "",
type: "pictorialBar", // 系列类型
symbolSize: [20, 12], // 标记的大小
symbolOffset: [0, 5], // 标记相对于原本位置的偏移
// 图例的图形样式
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#007aff", // 0% 处的颜色
},
{
offset: 1,
color: "#007aff", // 100% 处的颜色
},
],
},
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [1, 1, 1], // 系列中的数据内容数组
},
// 背景顶部的圆片
{
name: "", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "pictorialBar", // 系列类型
symbolSize: [20, 10], // 标记的大小
symbolOffset: [0, -5], // 标记相对于原本位置的偏移
symbolPosition: "end", // 图形的定位位置。可取值：start、end、center
// 图例的图形样式
itemStyle: {
color: "rgba(0, 122, 255, 1)",
opacity: 1,
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [0, 0, 0], // 系列中的数据内容数组
},
{
name: "", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "pictorialBar", // 系列类型
symbolSize: [20, 10], // 标记的大小
symbolOffset: [0, -5], // 标记相对于原本位置的偏移
symbolPosition: "end", // 图形的定位位置。可取值：start、end、center
// 图例的图形样式
itemStyle: {
color: "rgba(21, 84, 151, 1)",
opacity: 1,
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [100, 100, 100], // 系列中的数据内容数组
},
// 背景
{
name: "", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "bar", // 系列类型
barWidth: 20, // 指定柱宽度，可以使用绝对数值或百分比，默认自适应
barGap: "-100%", // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
// 图例的图形样式
itemStyle: {
color: "blue",
opacity: 0.2,
},
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.1)",
},
z: 0, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [0, 25, 50, 75, 100], // 系列中的数据内容数组
},
],
};
option && myChart.setOption(option);
},
