<template>
<div
ref="bar"
style="width: 500px; height: 300px; border: 1px solid red"
></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "Bar",
mounted() {
let myChart = echarts.init(this.$refs.bar, "dark");
myChart.setOption({
// 直角坐标系 grid 中的 x 轴
xAxis: {
show: true, // 是否显示 x 轴。
position: "bottom", // x 轴的位置。 'top''bottom'
offset: 20, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
type: "category", // 坐标轴类型。
/*
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
*/
data: [
{
value: "周一", // 单个类目名称。
/* 类目标签的文字样式。 */
textStyle: {
color: "red",
},
},
"周二",
"周三",
"周四",
"周五",
"周六",
"周日",
],
name: "x轴", // 坐标轴名称。
nameLocation: "end", // 坐标轴名称显示位置。 start middle center end
// 坐标轴名称的文字样式。
nameTextStyle: {},
nameGap: 10, // 坐标轴名称与轴线之间的距离。
nameRotate: 0, // 坐标轴名字旋转，角度值。
inverse: false, // 是否是反向坐标轴。
// boundaryGap: // boolean Array 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 具体看文档
min: "dataMin", // 坐标轴刻度最小值。
max: "dataMax", // 坐标轴刻度最大值。
triggerEvent: false, // 坐标轴的标签是否响应和触发鼠标事件，默认不响应。
/* 坐标轴轴线相关设置 */
axisLine: {},
/* 坐标轴刻度相关设置。 */
axisTick: {},
/* 坐标轴刻度标签的相关设置。 */
axisLabel: {},
/* 坐标轴在 grid 区域中的分隔线。 */
splitLine: {},
/* 坐标轴指示器配置项。 */
// axisPointer: {
// // show: "cross",
// },
},
yAxis: {
type: "value",
},
series: [
{
type: "bar", // 设置图标类型
name: "money", // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
/* 系列中的数据内容数组。数组项通常为具体的数据项 */
data: [30, 30, 50, 60, 80, 90, 100],
colorBy: "series", // 从调色盘 option.color 中取色的策略，可取值为
// 'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
// 'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
legendHoverLink: true, // 是否启用图例 hover 时的联动高亮。
coordinateSystem: "cartesian2d", // 'cartesian2d' 直角坐标系 'polar'使用极坐标系，通过 polarIndex 指定相应的极坐标组件
realtimeSort: true, // 是否开启实时排序，用来实现动态排序图效果，具体参见手册中动态排序柱状图的教程。
showBackground: true, //是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
/* 每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。 */
backgroundStyle: {
// color: "red",
},
/* 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 */
label: {
show: true, // 是否显示标签。
// ... 具体看文档
},
/* 标签的视觉引导线配置。 */
labelLine: { show: true },
/* 图形样式。可以在data中单独配置每根柱子的样式 */
itemStyle: {},
/* 标签的统一布局配置。 */
labelLayout: {},
// 高亮的图形样式和标签样式。
emphasis: {
disabled: false, // 是否关闭高亮状态。
focus: "self", // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
// 'none' 不淡出其它图形，默认使用该配置。
// 'self' 只聚焦（不淡出）当前高亮的数据的图形。
// 'series' 聚焦当前高亮的数据所在的系列的所有图形。
blurScope: "coordinateSystem", // 在开启focus的时候，可以通过blurScope配置淡出的范围。支持如下配置
// 'coordinateSystem' 淡出范围为坐标系，默认使用该配置。
// 'series' 淡出范围为系列。
// 'global' 淡出范围为全局。
/* 淡出时的图形样式和标签样式 */
},
blur: {
label: {}, //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
labelLine: {}, //标签的视觉引导线配置。
// 图形样式
itemStyle: {
color: "red",
},
},
/* 数据选中时的图形样式和标签样式。开启 selectedMode 后有效。 */
select: {},
selectedMode: true, // 选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，'series' 分别表示单选，多选以及选择整个系列
cursor: "pointer", //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
// barWidth : 柱条的宽度，不设时自适应。 numberstring
// barMaxWidth: barMinWidth barMinHeight barMinAngle
barGap: "30%", // 不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
barCategoryGap: "50%", // 同一系列的柱间距离，默认为类目间距的20%，可设固定值
large: true,
/*
是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。
开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。
缺点：优化后不能自定义设置单个数据项的样式。
*/
largeThreshold: 500, // 开启绘制优化的阈值。
// 图表标注。
markPoint: {
symbol: "circle", //标记的图形。 看文档
/*
标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。
通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。
用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 'min', 'max', 'average'。
直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时，优先级按上述的顺序。
*/
data: [
{
name: "最大值",
type: "max",
},
],
},
// 图表标线。
markLine: {
data: [
{
name: "平均线",
// 支持 'average', 'min', 'max'
type: "average",
},
],
},
// 图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。
markArea: {},
animation: true, // 是否开启动画。
},
],
tooltip: {},
});
},
};
</script>
<style>
</style>
