前言

通用配置就是指，不管什么类型的图表都可以使用的一些配置
它包括tittle，tooltip，toolbox，lengend

tittle（标题）

标题，就是标题！！！

  2. option = {
  3.     // 标题
  4.   title: {
  5.     // 是否显示标题
  6.     show: true,
  7.     // 标题文本，支持'\n'换行
  8.     text: 'ECharts Getting Started Example',
  9.     // 点击跳转
  10.     link: 'http://www.google.com',
  11.     // 标题样式
  12.     textStyle: {
  13.         color: 'red',
  14.         fontSize: 14,
  15.         ...
  16.     },
  17.       // 标题边框
  18.       borderWidth: 5,
  19.       // 标题边框的颜色
  20.       borderColor: 'red',
  21.     // 边框圆角
  22.       borderRadius: 5,
  23.     // 位置是top right bottom left 常用的父相子绝定位法
  24.     top: 10,
  25.     left: 50,
  26.     // 还可以设置副标题，副标题样式，背景色，边框，阴影...
  27.   },
  28. }

tooltip（提示信息）

就是提示框，当前鼠标滑过或者点击图表的提示，配置如下

  1. option = {
  2.     // 提示框
  3.   tooltip: {
  4.     // 显示开关
  5.         show : true,
  6.     // 触发提示框的类型（item是指类目项触发，axis是指坐标轴触发）
  7.     trigger : 'item', //或者 axis
  8.     // 触发方式三种：'mousemove'，'click'，'mousemove|click'
  9.     triggerOn : 'mousemove|click',
  10.     /**
  11.         这个格式化是重点，自定义提示信息的内容
  12.       1.字符串模板内置了{a}{b}{c}这样的模板，不同类型代表的意义不同
  13.       2.callback方式，比较推荐这种，以后写的多了里面的属性就会用了，比字符串模板更灵活
  14.     **/
  15.    //formatter:'{a}哒哒哒{b}'
  16.    formatter: (params)=>{
  17.      console.log(params)
  18.      return xxx
  19.    }
  20.    // 除了上述这些，还有延迟展示或者隐藏，提示的位置，限制在图表的区域内（移动端），背景色，字体等等样式
  21.   },
  22. }

toolbox（工具按钮）

就是内置的工具栏，玩了一下这个挺有意思，而且手撸实现也不难，有空试试
主要有5个工具栏导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

  1. option = {
  2.    feature:{
  3.          // 保存图片
  4.          // 这个大概率内部是canvas实现的，获取节点调用API
  5.            saveAsImage :{},
  6.           // 数据视图
  7.          // 这个应该是内嵌网页，遍历数据直接写入innerHTML，这个是能编辑，可能是富文本那种
  8.           dataView : {},
  9.           // 动态类型切换
  10.          // 这个是改serise里面的type，还得研究一下
  11.           magicType : {
  12.             //'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）
  13.               type:['line', 'bar','stack']
  14.       },
  15.           // 数据区域缩放
  16.          // 这个还挺麻烦，先拿截图区，然后改数据
  17.           dataZoom :{},
  18.           // 重置
  19.           restore :{},
  20.         // 自定义工具，名字必须以my开头
  21.          // 这个需求要改图标，转word或者excel估计要用
  22.       myTool2: {
  23.           show: true,
  24.         title: '自定义扩展方法',
  25.         icon: 'image://http://echarts.baidu.com/images/favicon.png',
  26.         onclick: function (){
  27.             alert('myToolHandler2')
  28.         }
  29.      }
  30.    }  
  31.   除此之外还有icon的样式，位置等等
  32. }

legend（图例）

说白了，就是标注啥颜色对应什么，这样看起来直观一些

  1.  option = {
  2.          legend: {
  3.         // data数组里面的字段要和series数组里面的name对应
  4.         // 源码应该是拿下标的字段和series的name属性值做对比
  5.         data: ['秀儿','大狗']
  6.       },
  7.       // padding调大小，position位置，图例样式itemStyle,线的样式lineStyle还有背景色什么的，
  8.     // 属性是挺多的不知道用的多不多，先记着用的多回头再加
  9.   }

总结

  2. option = {
  3.     // 标题
  4.   title: {
  5.     // 是否显示标题
  6.     show: true,
  7.     // 标题文本，支持'\n'换行
  8.     text: 'ECharts Getting Started Example',
  9.     // 点击跳转
  10.     link: 'http://www.google.com',
  11.     // 标题样式
  12.     textStyle: {
  13.         color: 'red',
  14.         fontSize: 14,
  15.         ...
  16.     },
  17.       // 标题边框
  18.       borderWidth: 5,
  19.       // 标题边框的颜色
  20.       borderColor: 'red',
  21.     // 边框圆角
  22.       borderRadius: 5,
  23.     // 位置是top right bottom left 常用的父相子绝定位法
  24.     top: 10,
  25.     left: 50,
  26.     // 还可以设置副标题，副标题样式，背景色，边框，阴影...
  27.   },
  28.      // 提示框
  29.   tooltip: {
  30.     // 显示开关
  31.         show : true,
  32.     // 触发提示框的类型（item是指类目项触发，axis是指坐标轴触发）
  33.     trigger : 'item', //或者 axis
  34.     // 触发方式三种：'mousemove'，'click'，'mousemove|click'
  35.     triggerOn : 'mousemove|click',
  36.     /**
  37.         这个格式化是重点，自定义提示信息的内容
  38.       1.字符串模板内置了{a}{b}{c}这样的模板，不同类型代表的意义不同
  39.       2.callback方式，比较推荐这种，以后写的多了里面的属性就会用了，比字符串模板更灵活
  40.     **/
  41.    //formatter:'{a}哒哒哒{b}'
  42.    formatter: (params)=>{
  43.      console.log(params)
  44.      return xxx
  45.    }
  46.    // 除了上述这些，还有延迟展示或者隐藏，提示的位置，限制在图表的区域内（移动端），背景色，字体等等样式
  47.   },
  48.              legend: {
  49.         // data数组里面的字段要和series数组里面的name对应
  50.         // 源码应该是拿下标的字段和series的name属性值做对比
  51.         data: ['秀儿','大狗']
  52.       },
  53.       // padding调大小，position位置，图例样式itemStyle,线的样式lineStyle还有背景色什么的，
  54.     // 属性是挺多的不知道用的多不多，先记着用的多回头再加
  55. }