该文章绝对的干货十足，不废话直接上代码，复制即可跑
一文在手，Echarts我有！！！
目录
Echarts的封装和属性配置
1、封装echarts组件
<template>
<div :id="myid" :style="style"></div>
</template>
<script>
import * as echarts from "echarts";
const idGen = () => {
return new Date().getTime();
};
export default {
props: {
height: {
type: String,
default: "600px",
},
width: {
type: String,
default: "600px",
},
options: {
type: Object,
default: null,
},
},
data() {
return {
myid: null,
myChart: null,
};
},
watch: {
width(a, b) {
if (this.myChart) {
// 这里需要异步才能生效
setTimeout(() => {
this.myChart.resize({
animation: {
duration: 500,
},
});
}, 0);
}
},
options() {
if (this.myChart) {
// notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。
//合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件
this.myChart.setOption(this.options, {
notMerge: false,
});
}
},
},
computed: {
style() {
return {
height: this.height,
width: this.width,
};
},
},
mounted() {
this.myid = idGen();
setTimeout(() => {
// 准备实例
this.myChart = echarts.init(document.getElementById(this.myid));
// 应用配置项
this.myChart.setOption(this.options);
}, 1000);
},
};
</script>2、在父组件中引入改组件
<template>
<div id="app" style="display: flex">
<MyEcharts :options="options" :width="width"></MyEcharts>
<MyEcharts :options="options2" width="500px" height="600px"></MyEcharts>
<MyEcharts :options="options3" width="330px" height="330px"></MyEcharts>
<!-- <button @click="changeWidth">changeWidth</button>
<button @click="changeOpt">changeOpt</button> -->
</div>
</template>
<script>
import * as echarts from "echarts";
import MyEcharts from "./myEharts.vue";
import { options1, options2, options3 } from "./options";
export default {
name: "App",
components: {
MyEcharts,
},
data() {
return {
options: options1,
options2: options2,
options3: options3,
width: "600px",
};
},
created() {
console.log(options2);
},
methods: {
changeWidth() {
if (this.width == "600px") {
console.log(1);
this.width = "800px";
} else {
console.log(2);
this.width = "600px";
}
},
changeOpt() {
if (this.options == options1) {
this.options = options2;
} else {
this.options = options1;
}
},
},
};
</script>3、引入单独的options （以折线图为例）
测试锚点
export let options2 = {
backgroundColor: '#002655',
grid: {
top: "10%",
left: "5%",
right: "5%",
bottom: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "transparent",
axisPointer: {
lineStyle: {
color: "#3763cd", //显示竖线颜色
type: "solid",
},
},
textStyle: {
color: "#ffffff"
}
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "#233653",
},
},
splitLine: {
show: true,
interval: 0,
lineStyle: {
color: "#304d81",
type: "dashed",
},
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: "#b8c4d9",
// padding: 10, //下方文字距离
fontSize: 14,
},
formatter: function (value) {
if (value === 0) {
return value;
}
return value;
},
},
axisTick: {
show: false,
},
data: [
2017,
2018,
2019,
2020,
2021,
2022,
2023,
2024
],
},
],
yAxis: [
{
// name: "单位：件",
nameTextStyle: {
color: "#7ec7ff",
fontSize: "13px",
// padding: [0, 0, 0, -50],
},
min: 0,
splitLine: {
show: false,
lineStyle: {
color: "#192a44",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#315182",
},
},
axisLabel: {
show: true,
interval: 1,
textStyle: {
color: "#b8c4d9",
padding: 10,
fontSize: 14,
},
formatter: function (value) {
if (value === 0) {
return value;
}
return value;
},
},
axisTick: {
show: false,
},
},
],
series: [
{
type: "line",
// symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
showSymbol: true, //圆点显隐
symbolSize: 5, //圆点大小
lineStyle: {
normal: {
width: 4,
color: "#6f85f4", // 线条颜色
},
},
itemStyle: {
color: "#cdd5ff", //圆角边框颜色
borderWidth: 5,
}, //右上角内容
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(111,133,244,1)",
},
{
offset: 1,
color: "rgba(111,133,244,0)",
},
],
false
),
shadowColor: "rgba(22,99,195, 0.5)", //阴影颜色
shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: [
150, 180, 200, 250, 300, 400, 450, 500
],
},
{
type: "line",
// symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
showSymbol: true, //圆点显隐
symbolSize: 5, //圆点大小
lineStyle: {
normal: {
width: 4,
color: "#22e1db", // 线条颜色
},
},
itemStyle: {
color: "#b1fffd", //圆角边框颜色
borderWidth: 5,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(34,225,219,1)",
},
{
offset: 1,
color: "rgba(34,225,219,0)",
},
],
false
),
shadowColor: "rgba(31,160,241,1)", //阴影颜色
shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: [100, 200, 300, 400, 550, 600, 650, 700],
},
],
}下面是个各属性详解：
2、各大属性详解
title属性
title: {
show: "true",//是否显示标题，默认显示，可以不设置
text: "echarts实例",//图表标题文本内容
link: "http://www.baidu.com/",//点击标题内容要跳转的链接
target: "blank",//跳转链接打开方式，blank是新窗口打开，self是自身窗口打开，跟a标签一样
textStyle: {//标题内容的样式
color: '#e4393c',//京东红
fontStyle: 'normal',//lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 18//主题文字字体大小，默认为18px
},
textAlign: 'left',//标题文本水平对齐方式，建议不要设置，就让他默认，想居中显示的话，建议往下看
textBaseline: "top",//默认就好,垂直对齐方式,不要设置
subtext: "我是title属性大全",//主标题的副标题文本内容，如果需要副标题就配置这一项
sublink: "http://www.baidu.com/",//点击副标题内容要跳转的链接
subtarget: "blank",//同主标题，blank是新窗口打开，self是自身窗口打开
subtextStyle: {//副标题内容的样式
color: 'green',//绿色
fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
fontWeight: "lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontFamily: "san-serif",//主题文字字体，默认微软雅黑
fontSize: 12//主题文字字体大小，默认为12px
},
padding: 5,//各个方向的内边距，默认是5，可以自行设置
itemGap: 10,//主标题和副标题之间的距离，可自行设置
left: "center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
top: "center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
right: "auto",//right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
bottom: "auto",//bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
//left设置center标题会自动水平居中
//top设置center标题会自动垂直居中
backgroundColor: "#ccc",//标题背景色，默认透明，颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'
borderColor: "red",//标题的边框颜色，颜色格式支持同backgroundColor
borderWidth: 2,//标题边框线宽，默认为0，可自行设置
shadowBlur: 10,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "black",
shadowOffsetX: 0,
shadowOffsetY: 0,
},tooltip属性
tooltip: { // 提示框组件:可以设置在全局(tooltip)，可以设置在坐标系中(grid.tooltip、polar.tooltip、single.tooltip)，可以设置在系列中(series.tooltip)，可以设置在系列的每个数据项中(series.data.tooltip)
show: true, // 是否显示提示框组件。包括提示框浮层和 axisPointer。
trigger: 'item', // 触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none' 什么都不触发
triggerOn: 'mousemove', // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent: true, // 是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间(见下方hideDelay睡醒)后隐藏，设置为true可以保证一直显示提示框内容
showDelay: 0, // 浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在triggerOn(提示框触发的条件)为 'mousemove' 时有效
hideDelay: 100, // 浮层隐藏的延迟，单位为 ms，在alwaysShowContent为true的时候无效
enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true
renderMode: 'html', // 浮层的渲染模式，默认以'html'即额外的DOM节点展示tooltip；此外还可以设置为'richText'表示以富文本的形式渲染，渲染的结果在图表对应的Canvas中（目前SVG尚未支持富文本），这对于一些没有DOM的环境（如微信小程序）有更好的支持。
confine: false, // 是否将tooltip框限制在图表的区域内。当图表外层的dom被设置为'overflow:hidden'，或者移动端窄屏，导致tooltip超出外界被截断时，此配置比较有用
appendToBody: false, // (从v4.7.0开始支持)是否将tooltip的DOM节点添加为HTML的<body>的子节点。只有当renderMode为'html'是有意义的
className: 'echarts-tooltip echarts-tooltip-dark', // (从v5.0.0开始支持)指定 tooltip 的 DOM 节点的 CSS 类。（只在 html 模式下生效）
transitionDuration: 0.4, // 提示框浮层的移动动画过渡时间，单位是s，设置为0的时候会紧跟着鼠标移动。
position: ['50%', '50%'], // (这里是相对位置，放置在容器正中间)提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
// formatter: '{b0}: {c0}<br />{b1}: {c1}', // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等，具体见下图
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
borderColor: '#333', // 提示框浮层的边框颜色
borderWidth: 0, // 提示框浮层的边框宽
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
], // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
textStyle: { // 提示框浮层的文本样式
color: '#fff', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格 可选：'normal'(常规) 'italic'(斜体) 'oblique'(倾斜)
fontWeight: 'normal', // 文字字体的粗细 可选：'normal'(常规) 'bold'(粗体) 'bolder'(加粗) 'lighter'(细体) 100 | 200 | 300 | 400...(像素)
fontFamily: 'sans-serif', // 文字的字体系列 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 14, // 文字的字体大小
lineHeight: 56, // 行高
width: 15, // 文本显示宽度
height: 15, // 文本显示高度
textBorderColor: '#333', // 文字本身的描边颜色
textBorderWidth: 2, // 文字本身的描边宽度
textBorderType: 'solid', // 文字本身的描边类型 可选：'solid'(实线) 'dashed'(虚线) 'dotted' 自v5.0.0开始，也可以是number或者number数组 如：textBorderType: [5, 10]，用以指定线条的 dash array，配合textBorderDashOffset可实现更灵活的虚线效果
textBorderDashOffset: 5, // (从v5.0.0开始支持)用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果
textShadowColor: 'transparent', // 文字本身的阴影颜色
textShadowBlur: 0, // 文字本身的阴影长度
textShadowOffsetX: 0, // 文字本身的阴影X偏移
textShadowOffsetY: 0, // 文字本身的阴影Y偏移
overflow: 'none', // 文字超出宽度是否截断或者换行。配置width时有效'truncate'截断，并在末尾显示ellipsis配置的文本，默认为... 'break' 换行'breakAll'换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
textShadowBlur: 0, // 文字本身的阴影长度
ellipsis: '这里是末尾显示的文本', // 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',// 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
order: 'seriesAsc', // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc' 提示框排列顺序可选值:'seriesAsc'根据系列声明, 升序排列。 'seriesDesc'根据系列声明, 降序排列。 'valueAsc'根据数据值, 升序排列。 'valueDesc'根据数据值, 降序排列。
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
order: 'seriesAsc', // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc'
// 注意版本支持
},grid属性
grid: {
show: true, //是否显示图表背景网格
left: '0%', //图表距离容器左侧多少距离
right: '0%', //图表距离容器右侧侧多少距离
bottom: '3%', //图表距离容器上面多少距离
top: 50, //图表距离容器下面多少距离
containLabel: true, //防止标签溢出
backgroundColor: '#ccc', //网格背景色，默认透明
},xAxis属性
xAxis:{
id:'组件id',//组件 ID。默认不指定
show:true/false,//是否显示 x 轴
gridIndex:0,//x 轴所在的 grid 的索引，默认位于第一个 grid
alignTicks:true/false,//在多个 x 轴为数值轴的时候，可以开启该配置项自动对齐刻度
position:'top/bottom',//x 轴的位置
offset:0,//X 轴相对于默认位置的偏移，在相同的position上有多个X轴的时候有用
type:'value/category/time/log',//坐标轴类型。value:数值轴,适用于连续数据;category:类目轴，适用于离散的类目数据;time:时间轴，适用于连续的时序数据;log:对数轴。适用于对数数据
name:'',//坐标轴名称
nameLocation:'start/middle(center)/end',//坐标轴名称显示位置
nameTextStyle{},//同legend配置项的textStyle
nameGap:15,//坐标轴名称与轴线之间的距离
nameRotate:0,//坐标轴名字旋转，角度值
inverse:false,//是否是反向坐标轴
boundaryGap:true,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
min:0,//坐标轴刻度最小值
max:'dataMax',//坐标轴刻度最大值
scale:false,//只在数值轴中（type: 'value'）有效
splitNumber:5,//坐标轴的分割段数
minInterval:0,//自动计算的坐标轴最小间隔大小
maxInterval:...,//自动计算的坐标轴最大间隔大小
interval:...,//强制设置坐标轴分割间隔
logBase:10,//对数轴的底数，只在对数轴中（type: 'log'）有效
silent:false,//坐标轴是否是静态无法交互
triggerEvent:false,//坐标轴的标签是否响应和触发鼠标事件
data:{
value:...,//单个类目名称
textStyle:{}
},
axisLine{
show:true,//是否显示坐标轴轴线
onZero:ture,//X 轴或者 Y 轴的轴线是否在另一个轴的0刻度上，只有在另一个轴为数值轴且包含0刻度时有效
onZeroAxisIndex:...,//当有双轴时，可以用这个属性手动指定，在哪个轴的0刻度上
symbol:'none/arrow',//轴线两边的箭头
symbolSize:[10,15],//轴线两边的箭头的大小[宽度，高度]
symbolOffset:[0,0]//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移
},
axisTick:{
show:true,//是否显示坐标轴刻度
alignWithLabel:false,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
interval:0/'auto',//坐标轴刻度的显示间隔，在类目轴中有效
inside:false,//坐标轴刻度是否朝内，默认朝外
length:5//坐标轴刻度的长度
},
lineStyle:{
color:'#fff',//刻度线的颜色
width:1,//坐标轴刻度线宽
type:'solid/dashed/dotted/',//线的类型
dasheOffset:0,//设置虚线的偏移量
cap:'butt/round/square',//指定线段末端的绘制方式
join:'bevel/round/miter',//设置2个长度不为0的相连部分如何连接在一起的属性
miterLimit:10,//设置斜接面限制比例
shadowBlur:0,//图形阴影的模糊大小
shadowColor:'#fff',//阴影颜色
shadowOffsetX:0,//阴影水平方向上的偏移距离
shadowOffsetY:0,//阴影垂直方向上的偏移距离
opacity:1//图形透明度
},
axisLabel:{
show:true,//是否显示刻度标签
interval:'auto'/0,//坐标轴刻度标签的显示间隔，在类目轴中有效
inside:false,//刻度标签是否朝内，默认朝外
rotate:0,//刻度标签旋转的角度
margin:8,//刻度标签与轴线之间的距离
hideOverlap:false,//是否隐藏重叠的标签
color:'#fff'//刻度标签文字的颜色
},
splitLine:{
show:true,//是否显示分隔线
interval:'auto'//坐标轴分隔线的显示间隔
},
},yAxis属性
yAxis: {
show: true, //是否显示
position: 'left', //y轴的位置(left/right)
offset: 0, //y轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type: 'value', //坐标轴类型 (value/category/time/log)
name: '单位/个', //坐标轴名称
nameLocation: 'end', //坐标轴名称显示位置(start/center/end)
//坐标轴名称的文字样式
nameTextStyle: {
align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
verticalAlign: 'bottom', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'）
lineHeight: '15', // 行高
// backgroundColor: 'red',
color: 'green', //字体颜色
fontSize: 10, //字体大小
fontWeight: 'normal', //字体粗细 (bold/bolder/lighter/normal)
fontstyle: 'normal', //文字样式(normal/italic/oblique)
fontFamily: '楷体', //文字风格(楷体/宋体/华文行楷等等)
padding: [5, 10, 2, -5] //文字边距(上右下左)
},
nameGap: 15, //坐标轴名称与轴线之间的距离
nameRotate: 0, //坐标轴名字旋转的角度值
inverse: false, //是否为反向坐标轴
// 坐标轴轴线
axisLine: {
show: true, // 是否显示
lineStyle: {
color: 'green', //坐标轴颜色
width: 2, // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'实线；'dashed'虚线；'dotted'点状）
opacity: 0.5 //线的透明度(用0~1的小数表示)
},
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值（左、右），none表示没有箭头，arrow表示有箭头
symbolSize: [8, 15] // 轴线两端箭头大小，数值一表示高度，数值二表示宽度
},
// 刻度线
axisTick: {
show: true, // 是否显示
inside: false, // 坐标轴刻度是否朝内，默认朝外(false)
length: 5, // 坐标轴刻度的长度
alignWithLabel: true, //刻度线与刻度标签是否对齐
lineStyle: {
color: '#333', //刻度线颜色
width: 2, // 刻度线粗细
type: 'dashed' // 坐标轴线线的类型（'solid'实线；'dashed'虚线；'dotted'点状）
}
},
// 坐标轴刻度标签(轴文字)
axisLabel: {
show: true,
interval: 1, // 显示间隔，在类目轴中有效，0显示所有
inside: false, // 是否朝内，默认朝外(false)
rotate: 0, // 旋转角度，旋转的角度从 -90 度到 90 度
margin: 8, // 刻度标签与轴线之间的距离
color: '#ccc', // 刻度标签文字的颜色
fontStyle: 'normal', // 文字字体的风格（'normal'无样式；'italic'斜体；'oblique'倾斜字体）
fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
fontSize: '12' // 文字字体大小
// align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
// lineHeight: '12', // 行高
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
// verticalAlign: 'top', // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'
// backgroundColor: 'red' // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'
},
// 网格线
splitLine: {
show: true, // 是否显示分隔线(默认数值轴显示，类目轴不显示)
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效，0显示所有
// 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
color: ['#aaa'],
width: 1, // 分隔线线宽
type: 'solid' // 坐标轴线线的类型（'solid'实线；'dashed'虚线；'dotted'点状）
},
// 分隔区域
splitArea: {
show: false, // 是否显示分隔区域
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效，0显示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色
opacity: 0.5 // 图形透明度(0-1)
}
}
},series属性
series: [
{
type: "bar",// 图形类型
barWidth: 30,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00e7e0",
},
{
offset: 1,
color: "#00d0c2",
},
]),
barBorderRadius: [4, 4, 0, 0],
},
},
// name: "测试", // 在tooltip显示的名字
// symbolSize: 8, // 折线结点大小
// areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(111,133,244,1)",
},
{
offset: 1,
color: "rgba(111,133,244,0)",
},
],
false
),
shadowColor: "rgba(22,99,195, 0.5)", //阴影颜色
shadowBlur: 10, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
}, // 图形区域
// emphasis: {
// focus: "series", // 把另一个遮盖
// },
},
],dataZoom属性
//柱状数据过多，设置此参数可以左右滑动
dataZoom: [
// 有滚动条 平移
{
type: "slider",
realtime: true,
startValue: 0, // 从头开始。
endValue: 3, // 一次性展示4个
height: 4,
fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
handleSize: 0, // 两边手柄尺寸
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top: "96%",
// zoomLock:true, // 是否只平移不缩放
// moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
// zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
},
{
type: "inside", // 支持内部鼠标滚动平移
start: 0,
end: 40,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
],legend属性
legend: {
bottom: '5%',//top，bottom
left: 'center',//left，right，center
icon: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
itemHeight: 6, // 图例icon高度
itemWidth: 6, // 图例icon宽度
orient: "horizontal", // vertical垂直排列， horizontal 水平排列
// type: "scroll", // 可滚动翻页的图例
// pageIconColor: "#999", //翻页箭头颜色
// pageIconInactiveColor: "green", //翻页（即翻页到头时箭头的颜色
pageTextStyle: {
color: "#ccc", //翻页数字颜色
},
align: "left", // 图例icon在左侧
// formatter:function (item) {
// console.log('legend',item)
// return `自定义：${item}`
// },
selectedMode: false,//去掉鼠标点击事件 false不可点击 true可以点击
},