Bootstrap

Echarts之封装和全属性配置(属性大全有注释)

该文章绝对的干货十足,不废话直接上代码,复制即可跑

一文在手,Echarts我有!!!

目录

1、封装echarts组件

         2、各大属性详解

title属性

tooltip属性

grid属性

xAxis属性

yAxis属性

series属性

dataZoom属性

legend属性


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可以点击
    },

;