option参数说明

术语查询手册
https://echarts.apache.org/zh/cheat-sheet.html

X轴/Y轴(他们的选项一致)

xAxis/yAxis: {
    name:'名称', // 名称
     // 坐标轴名称的文字样式
    nameTextStyle: {
      color: '#999',
      align: 'right',
      padding: [3, 6, 5, 6],
   },           
    type: 'category',  // 类型
    data: ['Mon', 'Tue', 'Wed', 'Thu'], // 数据
    axisTick:{  // 是否显示坐标轴刻度
    show:false
    },
    axisLabel: { // 坐标刻度相关信息 
        show: true, // 显示隐藏坐标刻度的信息
        textStyle: { //坐标刻度文字样式
          color:"#f40"  
        }
      }, 
    axisLine:{ // 线条颜色更改
        lineStyle:{
            color:'#999'
        }
    },
    splitLine:{ // 网格状态
        show:false, // 是否显示网格
        lineStyle: { // 网格线类型
            type: 'dashed',
        },                 
    }
},

series不同图表/形系列的样式 

series:[
    {
        data: [300, 300], // 数据
        center: ['55%', '60%'], // 饼状图位置调整
        type: 'line', // 类型
        symbol: 'none', // 折线图中不显示折线中的小圆点 也可以选择例如 symbol:'circle'
        smooth: true, // 折线图中是否平滑曲线显示。
        symbolSize: 8, // 折线图中小圆点的大小
        stack: 'Ad', // 柱状图是否推叠在一起(数据堆叠) 名称一致就可以 例如多个柱状图stack都叫ad
        avoidLabelOverlap: false, // 饼图防止标签重叠 默认开启
        barWidth: 30, // 柱状图宽度
        barGap: '0' /*柱状图多个并排柱子设置柱子之间的间距*/,
        barCategoryGap: '0%' /*柱状图多个并排柱子设置柱子之间的间距*/,
        itemStyle: {
            // 图形的颜色 可以统一设置 在最外层(和 series同级) color:['#f40','#ccc',]
            color: '#F2597F',
        },
        label: {
            // 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
            show: true,
            interale: 0,
            rotate: 40,
            position: 'top',
            fontSize: '14',
            distance: 10, // 文字距离图形元素的距离
        },
        emphasis: {
            // 鼠标移动到图形上的高亮状态
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
        },
        areaStyle: {
            // 线图区域填充折的渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgba(213,72,120,0.8)',
                },
                {
                    offset: 1,
                    color: 'rgba(213,72,120,0.3)',
                },
            ]),
        },
        // 线图区域填充折的渐变色的另一种方式
        // areaStyle: {
        //     normal: {
        //         color: {
        //             colorStops: [
        //                 {
        //                     offset: 0,
        //                     color: '#f0f5ff', // 0% 处的颜色
        //                 },
        //                 {
        //                     offset: 0.7,
        //                     color: '#f0f5ff', // 100% 处的颜色
        //                 },
        //             ],
        //             globalCoord: false, // 缺省为 false
        //         },
        //     },
        // },                
        lineStyle: {
            // 折线图线条颜色
            color: '#f67979',
            width: 1,
        },
        /* 下面这套配合下来 可以让鼠标在移动时候产生小圆点  原理就是 symbolSize: 1 然后再自定义大小*/
        symbolSize: 1,
        animation: true,
        itemStyle: {
            normal: {
                color: 'rgba(54, 120, 254, 1)',
                label: {
                    //  控制数值是否在图表grid中显示
                    interale: 0,
                    show: false,
                    color: 'rgba(54, 120, 254, 1)',
                    position: 'top',
                    fontSize: '14',
                    fontWeight: '600',
                },
            },
            // 圆点样式控制 默认是空心的
            emphasis: {
                color: 'rgba(54, 120, 254, 1)',
                borderColor: 'rgba(54, 120, 254, 1)', // 图形的描边颜色
                borderWidth: 6, // 描边的线宽
                shadowBlur: 15, // 图形的阴影大小
                shadowColor: '#fff', // 图形的阴影颜色
                z: 9,
            },
        },
    },
]

tooltip鼠标移动到组件上是否显示提示框

tooltip: {
            trigger: 'item', // 显示类型 例如还有  trigger: 'axis'(这个在饼图中不会起作用可在线型图中有效)
            showDelay: 20, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
            hideDelay: 20, // 隐藏延时
            axisPointer: {
                type: 'line',
                lineStyle: {
                    // 线的颜色 类型等属性
                    type: 'solid',
                },
                z: 2, // 坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
            },
            // textStyle: {
            //     color: '#f40',
            // },
            // 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
            formatter: data => {
                const tempArr = []
                if (data && data.length) {
                    data.forEach(series => {
                        tempArr.push('<div style="width: 100%;color:#666;font-size:12px;">当日最高</div>')
                        tempArr.push(`<div style="color:#3376FE;font-size:20px;">${series.value}</div>`)
                    })
                }
                return tempArr.join('')
            },
            // 鼠标移动上去的浮层背景色
            backgroundColor: 'rgba(255, 255, 255, 1)',
            // 浮层内容的样式 例如内容排版内容颜色
            extraCssText: 'line-height: 26px; box-shadow: 0px 6px 24px 0px rgba(37, 37, 37, 0.16); border-radius: 4px;',
        },

title标题

title: {
            text: '昨日退货产品金额', // 标题
            top: 15,
            left: 10,
            subtext: `${727}`, // 副标题
            textStyle: {
                // 标题样式
                color: '#666',
                fontSize: 18,
            },
            subtextStyle: {
                // 副标题样式
                color: '#333',
                fontSize: 30,
            },
        },

grid坐标系网格位置宽度等信息

grid: {
  width:'100px',// 不写默认自适应
  top: '90px',
  bottom: '30px',
  left: '50px',
  right: '20px'
},

legend图列组件(常用在柱状图)可以通过点击图例控制哪些系列不显示
(就是上方带颜色块状元素点击可以显示隐藏网格中元素是否显示)

legend: {
  type: 'scroll',
   top: 50,
   right:20,
   itemGap:10, 
   itemWidth:12,
   itemHeight:12,
},

dataZoom滑块 滑动可以看grid内容区间的数值变化

dataZoom: [
    {
      type: 'slider', //滑动条类型
      realtime: true, //滑动是否实时响应 还是滑动完再响应
      orient:'vertical', // 布局方向 默认横向 写了这个'vertical'参数为竖向
      filterMode: 'empty', // 过滤数据的方式
      showDataShadow: true,//在滑动轴上是否显示数据趋势阴影
      /* 滑动条位置 */
      left:10, 
      right: 6,
      top: 20,
      bottom: 22,
      /* 数值起始位置设定(刚开始默认展示那个区段) */
      startValue:12,
      endValue:100,  
    },
],