echarts部分属性使用

标题部分 (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>