-
标题部分 (
title): 控制图表的标题显示，包括主标题和副标题。你可以设置标题的文字内容、样式、位置等属性。 -
图例部分 (
legend): 图例是用来标识每个系列的名称的，可以让用户通过点击图例来控制显示/隐藏对应的数据系列。 -
提示框部分 (
tooltip): 当鼠标悬停在数据项上时，会弹出提示框显示相关的数据信息。 -
X 轴部分 (
xAxis): 控制 X 轴的显示，包括刻度、标签等属性。在这里设置了 X 轴的数据以及一些样式。 -
Y 轴部分 (
yAxis): 控制 Y 轴的显示，与 X 轴类似，但在这里没有设置特定的属性。 -
数据系列 (
series): 这里定义了柱状图的数据系列，每个系列对应一个柱状图的条形。每个系列包括名称、类型（这里是柱状图）、数据等属性。
这段代码中的配置选项可以用来生成一个带有标题、图例、提示框和柱状图数据的简单图表。
<template>
<div>
<div ref="idRef" style="width:400px;height:300px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
components: {
},
data() {
return {
};
},
mounted() {
this.getInitEcharts();
},
created() {
},
methods: {
getInitEcharts() {
var myChart = echarts.init(this.$refs.idRef)
let option = {
title: {
show: true,
// text: "{a|Main Title}",
// subtext: "Sub Title",
// link: 'aa',
// 当前窗口打开超链接seft,'blank' 新窗口打开
target: 'self',
textAlign: 'left',
// 用于配置标题文本是否触发事件
triggerEvent: true,
// 主副标题之间的间距。
itemGap: 100,
padding: [
10, // 上
5, // 右
5, // 下
10, // 左
],
borderRadius: 5,
textStyle: {
color: '#ccc',
fontStyle: 'oblique',
fontWeight: 'bold',
fontFamily: 'Arial',
fontSize: 18,
lineHeight: 30,
textBorderColor: "blue",
// 描边宽度
textBorderWidth: 5,
// 描边类型
textBorderType: 'dashed',
// 用于设置虚线的偏移量
textBorderDashOffset: 30,
// 文字本身的阴影颜色。
textShadowOffsetX: 1,
width: 50,
// 文字超出宽度是否截断或者换行'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...'break' 换行'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
overflow: 'truncate',
ellipsis: '...',
rich: {
a: {
color: 'yellow',
fontSize: 20,
fontWeight: 'bold'
},
b: {
color: 'blue',
fontStyle: 'italic'
}
}
},
subtextStyle: {
fontSize: 20
}
},
legend: {
// 'plain'：普通图例。缺省就是普通图例。
// 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
data: [
'图',
'图2',
'图3',
'图4',
'图5',
'图6',
'图7'
],
type: 'scroll',
// 设置scoll时,设置scrollDataIndex可以指定当前legend显示的位置
scrollDataIndex: 0,
// 按钮和页信息之间的间隔。
pageButtonItemGap: 10,
// 图例控制块和图例项之间的间隔。
pageButtonGap: 10,
// 控制下一页的显示在左侧还是右侧'start','end'
pageButtonPosition: 'end',
pageIcons: {
// horizontal: ['arrow-left', 'arrow-right'], // 设置水平方向翻页按钮图标
vertical: ['image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7', 'arrow-down'] // 设置垂直方向翻页按钮图标
},
id: 'myLegend',
},
tooltip: {
},
xAxis: {
data: ['1', '2', '3', '4', '5'],
// x轴线
axisLine: {
symbol: 'arrow',
lineStyle: {
type: 'dashed'
// ...
}
},
// x刻度
axisTick: {
length: 5,
lineStyle: {
type: 'dashed'
// ...
}
},
// 刻度标签
axisLabel: {
formatter: '{value}kg',
align: 'center'
// ...
}
},
yAxis: {
},
series: [
{
name: '图',
type: 'bar',
data: [2, 5, 9, 10, 22]
},
{
name: '图2',
type: 'bar',
data: [2, 5, 9, 10, 22]
},
{
name: '图3',
type: 'bar',
data: [2, 5, 9, 10, 22]
},
{
name: '图4',
type: 'bar',
data: [2, 5, 9, 10, 22]
},
{
name: '图5',
type: 'bar',
data: [2, 5, 9, 10, 22]
},
{
name: '图6',
type: 'bar',
data: [2, 5, 9, 10, 22]
},
{
name: '图7',
type: 'bar',
data: [2, 5, 9, 10, 22]
}
]
}
myChart.setOption(option)
// 当页面的宽度为百分比的时候使用,自适应
window.onresize = function () {
myChart.resize();
};
myChart.on('click', function (params) {
console.log(params, 'lllll')
if (params.componentType === 'title') {
console.log('点击了标题文本：' + params.event.target.style.text);
}
});
// 显示加载动画，当请求接口时，进行调用，接口返回数据时候隐藏。
setTimeout(() => {
myChart.showLoading({
text: '正在加载数据...',
// 图标颜色
color: 'red',
textColor: 'blue',
// 背景遮罩颜色
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
});
},0)
// 隐藏加载动画
setTimeout(()=>{
myChart.hideLoading();
},500)
}
},
};
</script>
<style lang="scss" scoped></style>
