:::info 纯JavaScript的图标库底层依赖于Canvas类库的Rzender(一个二维渲染引擎) :::

工具：

https://echarts.apache.org/examples/zh/index.html#chart-type-pie

常用说明

  1. /*1.引入JS库*/
  2. /*2.初始化*/
  3. var myChart = echarts.init(document.getElementById('main'),'使用主题');
  5. /*3.写入参数*/
  6. myChart.setOption({
  7.             backgroundColor: 'rgba(0,0,0,0)', // (选填)全图默认背景
  8.             color: ['#ff7f50', '#87cefa'], // (选填)默认色板
  9.             title: {}, // 标题：参数如下2
  10.             legend: {}, // 图例：参数如下3
  11.             tooltip: {}, // 提示：参数如下6
  13.             // X轴
  14.             xAxis: {},
  15.             yAxis: {}, // Y轴
  16.             series: [
  17.                 //折线图
  18.                 {
  19.                     barWidth: 26,                     // 柱形宽度（折线图无）
  20.                     name: '',                             // legend对应的名称
  21.                     type: 'bar',                         // 图形类型
  22.                     stack: 'TUE',                     // 若多个值一样，则堆叠到一起
  23.                     data: [1, 1, 1, 11],         // 数值
  24.                     smooth: true,                     // 线条平滑展示，折线图起作用
  25.                     areaStyle: {},                     // 面积填充,折线图有效type: 'line',//类型
  26.                     color: [],                             //自己的调色盘
  27.                     data: [],                             //显示数据
  28.                     xAxisIndex: 1,                     //对应X轴索引默认1
  29.                     YAxisIndex: 1,                    //对应Y轴索引默认1
  30.                     // 鼠标悬浮时高亮样式。
  31.                     emphasis: {
  32.                         focus: "series", // 把另一个遮盖
  33.                         itemStyle: {
  34.                             color: 'blue'
  35.                         }, // 高亮时点的颜色。 
  36.                         label: {
  37.                             show: true, // 高亮时标签的文字。
  38.                             formatter: 'This is a emphasis label.'
  39.                         }
  40.                     },
  41.                 },
  42.             ]
  43.         );
  45. /*设置颜色渐变*/
  46.  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  47.    { offset: 0, color: '#83bff6' },
  48.    { offset: 0.5, color: '#188df0' },
  49.    { offset: 1, color: '#188df0' }
  50.  ])
  52. /*替换修改输出*/
  53.  formatter: '{a} <br/>{b} : {c} ({d}%)'
  55. /*点击事件*/
  56. myChart.on('click', function(params) {
  57.   // 控制台打印数据的名称
  58.   console.log(params.name);
  59. });
  61. /*设置统计图大小*/
  62. myChart.resize({
  63.   //width: 800,
  64.   //height: 400
  65. });
  66. echartsInstance.clear//移除统计图
  67. echartsInstance.dispose//销毁统计图标，释放内存

1.坐标轴：xAxis、yAxis

  1.   xAxis:{
  2.     type: 'category',                                                                //设置分类轴
  3.     name:'坐标轴名称',
  4.     show:true,                                                                            //是否显示
  5.     data:[],                                                                                //显示内容    
  6.     boundaryGap:boolean,array                                                //两侧是否留空白
  7.     axisLabel：{                                                                         //X轴刻度标签
  8.         show:        boolean                                                        //是否显示刻度标签    
  9.         color：red                                                                  //文字颜色
  10.         interval: 'auto',                                                  //x坐标数据间距 自动
  11.         align: 'center'，                                               //x轴文字距中线对齐
  12.         rotate: -45 ,                                                     //x轴文字旋转
  13.         axisLine：{                               //刻度线
  14.           show:                                        //是否显示
  15.           lineStyle:{ color:'颜色'}    //刻度线样式
  16.         }
  17.     }                                                                        
  18.   },
  20.   yAxis: {
  21.       splitNumber: 3,  //y轴刻度线个数
  22.       splitLine: {  
  23.         show: true,
  24.         // 改变轴线颜色
  25.         lineStyle: {
  26.           // 使用深浅的间隔色
  27.           color: ['rgba(238, 238, 238, 1)'],
  28.           type: 'dashed'
  29.         }
  30.       }
  31.     },

2.标题：title

  1. title: {
  2.       text:'标题',                                                                 //标题文字
  3.       subtext:'辅标题',                                                      //辅标题文字
  4.       textStyle: {},                                                            //文字：大小|粗细|颜色
  5.       subtextStyle: {},                                                        //同上
  6.       x: 'left',                                                     // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right'¦ {number}（x坐标，单位px）
  7.       y: 'top',                                                      // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
  8.       backgroundColor: 'rgba(0,0,0,0)',                        // 标题背景色
  9.       borderColor: '#ccc',                                           // 标题边框颜色
  10.       borderWidth: 0,                                                // 标题边框线宽，单位px，默认为0（无边框）
  11.       padding: 5,                                                    // 标题内边距，单位px，默认各方向内边距为5,接受数组分别设定上右下左边距，同css
  12.       itemGap: 10,                                                   // 主副标题纵向间隔，单位px，默认为10，
  13. }

3.图例：legend

  1.   // 图例
  2.  legend: {
  3.         data:[],                                                                    // 数据
  4.         textStyle: {}                                                            // 文字：大小|粗细|颜色
  5.         backgroundColor: 'rgba(0,0,0,0)',                    // 背景：
  6.         orient: 'horizontal',                                      // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
  7.         x: 'center',                                            // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right'¦ {number}（x坐标，单位px）
  8.         y: 'top',                                                  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
  9.         borderColor: '#ccc',                                       // 图例边框颜色
  10.         borderWidth: 0,                                            // 图例边框线宽，单位px，默认为0（无边框）
  11.         padding: 5,                                                // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
  12.         itemGap: 10,                                               // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
  13.         itemWidth: 20,                                             // 图例图形宽度
  14.         itemHeight: 14,                                            // 图例图形高度 
  15. }

4.值域：dataRange

  1. // 值域
  2. dataRange: {
  3.         orient: 'vertical',                                            // 布局方式，默认为垂直布局，可选为：'horizontal' ¦ 'vertical'
  4.         x: 'left',                                                     // 水平安放位置，默认为全图左对齐，可选为：'center' ¦ 'left' ¦ 'right'¦ {number}（x坐标，单位px）
  5.         y: 'bottom',                                                   // 垂直安放位置，默认为全图底部，可选为：'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
  6.         backgroundColor: 'rgba(0,0,0,0)',                        // 背景颜色
  7.         borderColor: '#ccc',                                           // 值域边框颜色
  8.         borderWidth: 0,                                                // 值域边框线宽，单位px，默认为0（无边框）
  9.         padding: 5,                                                   // 值域内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
  10.         itemGap: 10,                                                   // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
  11.         itemWidth: 20,                                                 // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
  12.         itemHeight: 14,                                                // 值域图形高度，线性渐变垂直布局高度为该值 * 10
  13.         splitNumber: 5,                                                // 分割段数，默认为5，为0时为线性渐变
  14.         color:['#1e90ff','#f0ffff'],                                // 颜色 
  15.         text:['高','低'],                                             // 文本，默认为数值文本
  16.         textStyle: {}                                                                // 文字：大小|粗细|颜色
  17. },

5.工具：toolbox

  1.    toolbox: {
  2.         orient: 'horizontal',                                          // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
  3.         x: 'right',                                                 // 水平安放位置，默认为全图右对齐，可选为：'center' ¦ 'left' ¦ 'right'¦ {number}（x坐标，单位px）
  4.         y: 'top',                                                      // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
  5.         color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
  6.         backgroundColor: 'rgba(0,0,0,0)',                     // 工具箱背景颜色
  7.         borderColor: '#ccc',                                           // 工具箱边框颜色
  8.         borderWidth: 0,                                                // 工具箱边框线宽，单位px，默认为0（无边框）
  9.         padding: 5,                                                    // 工具箱内边距，单位px，默认各方向内边距为5， 接受数组分别设定上右下左边距，同css
  10.         itemGap: 10,                                                   // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
  11.         itemSize: 16,                                                  // 工具箱图形宽度
  12.         feature:[]                                                                      // 选择的工具
  13.         featureImageIcon : {},                                         // 自定义图片icon
  14.         featureTitle : {
  15.             mark : '辅助线开关',
  16.             markUndo : '删除辅助线',
  17.             markClear : '清空辅助线',
  18.             dataZoom : '区域缩放',
  19.             dataZoomReset : '区域缩放后退',
  20.             dataView : '数据视图',
  21.             lineChart : '折线图切换',
  22.             barChart : '柱形图切换',
  23.             restore : '还原',
  24.             saveAsImage : '保存为图片'
  25.         }
  26.     },

6.提示：tooltip

  1. tooltip: {
  2.         trigger: 'item',                                           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
  3.         showDelay: 20,                                             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
  4.         hideDelay: 100,                                            // 隐藏延迟，单位ms
  5.         transitionDuration : 0.4,                                  // 动画变换时间，单位s
  6.         backgroundColor: 'rgba(0,0,0,0.7)',         // 提示背景颜色，默认为透明度为0.7的黑色
  7.         borderColor: '#333',                                       // 提示边框颜色
  8.         borderRadius: 4,                                           // 提示边框圆角，单位px，默认为4
  9.         borderWidth: 0,                                            // 提示边框线宽，单位px，默认为0（无边框）
  10.         padding: 5,                                                // 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
  11.         axisPointer : {                                            // 坐标轴指示器，坐标轴触发有效
  12.             type : 'line',                                         // 默认为直线，可选为：'line' | 'shadow'
  13.             lineStyle : {                                          // 直线指示器样式设置
  14.                 color: '#48b',
  15.                 width: 2,
  16.                 type: 'solid'
  17.             },
  18.             shadowStyle : {                     // 阴影指示器样式设置
  19.                 width: 'auto',                  // 阴影大小
  20.                 color: 'rgba(150,150,150,0.3)'  // 阴影颜色
  21.             }
  22.         },
  23.         textStyle: {
  24.             color: '#fff'
  25.         }
  26.     },

7.网格：grid-调整大小位置

  1. grid: {
  2.         show:true,//是否显示直角坐标系
  3.         left: "5%",//左
  4.         top: "5%",//上
  5.         right: "5%",//右
  6.         bottom: "5%",//下
  7.         backgroundColor: 'rgba(0,0,0,0)',//背景颜色
  8.         borderWidth: 1,//边框宽度
  9.         borderColor: '#ccc'//边框颜色
  10.         containLabel: true,//计算容器宽度宽度到标签还是到刻度线
  11.     },

8.类目轴：categoryAxis

  1. categoryAxis: {
  2.         position: 'bottom',    // 位置
  3.         nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
  4.         boundaryGap: true,     // 类目起始和结束两端空白策略
  5.         axisLine: {            // 坐标轴线
  6.             show: true,        // 默认显示，属性show控制显示与否
  7.             lineStyle: {       // 属性lineStyle控制线条样式
  8.                 color: '#48b',
  9.                 width: 2,
  10.                 type: 'solid'
  11.             }
  12.         },
  13.         axisTick: {            // 坐标轴小标记
  14.             show: true,       // 属性show控制显示与否，默认不显示
  15.             interval: 'auto',
  16.             // onGap: null,
  17.             inside : false,    // 控制小标记是否在grid里
  18.             length :5,         // 属性length控制线长
  19.             lineStyle: {       // 属性lineStyle控制线条样式
  20.                 color: '#333',
  21.                 width: 1
  22.             }
  23.         },
  24.         axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
  25.             show: true,
  26.             interval: 'auto',
  27.             rotate: 0,
  28.             margin: 8,
  29.             // formatter: null,
  30.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  31.                 color: '#333'
  32.             }
  33.         },
  34.         splitLine: {           // 分隔线
  35.             show: true,        // 默认显示，属性show控制显示与否
  36.             // onGap: null,
  37.             lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
  38.                 color: ['#ccc'],
  39.                 width: 1,
  40.                 type: 'solid'
  41.             }
  42.         },
  43.         splitArea: {           // 分隔区域
  44.             show: false,       // 默认不显示，属性show控制显示与否
  45.             // onGap: null,
  46.             areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
  47.                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
  48.             }
  49.         }
  50.     },

9.数值型坐标轴默认参数：valueAxis

  1. valueAxis: {
  2.         position: 'left',      // 位置
  3.         nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
  4.         nameTextStyle: {},     // 坐标轴文字样式，默认取全局样式
  5.         boundaryGap: [0, 0],   // 数值起始和结束两端空白策略
  6.         splitNumber: 5,        // 分割段数，默认为5
  7.         axisLine: {            // 坐标轴线
  8.             show: true,        // 默认显示，属性show控制显示与否
  9.             lineStyle: {       // 属性lineStyle控制线条样式
  10.                 color: '#48b',
  11.                 width: 2,
  12.                 type: 'solid'
  13.             }
  14.         },
  15.         axisTick: {            // 坐标轴小标记
  16.             show: false,       // 属性show控制显示与否，默认不显示
  17.             inside : false,    // 控制小标记是否在grid里
  18.             length :5,         // 属性length控制线长
  19.             lineStyle: {       // 属性lineStyle控制线条样式
  20.                 color: '#333',
  21.                 width: 1
  22.             }
  23.         },
  24.         axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
  25.             show: true,
  26.             rotate: 0,
  27.             margin: 8,
  28.             // formatter: null,
  29.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  30.                 color: '#333'
  31.             }
  32.         },
  33.         splitLine: {           // 分隔线
  34.             show: true,        // 默认显示，属性show控制显示与否
  35.             lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
  36.                 color: ['#ccc'],
  37.                 width: 1,
  38.                 type: 'solid'
  39.             }
  40.         },
  41.         splitArea: {           // 分隔区域
  42.             show: false,       // 默认不显示，属性show控制显示与否
  43.             areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
  44.                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
  45.             }
  46.         }
  47.     },
  49.     polar : {
  50.         center : ['50%', '50%'],    // 默认全局居中
  51.         radius : '75%',
  52.         startAngle : 90,
  53.         splitNumber : 5,
  54.         name : {
  55.             show: true,
  56.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  57.                 color: '#333'
  58.             }
  59.         },
  60.         axisLine: {            // 坐标轴线
  61.             show: true,        // 默认显示，属性show控制显示与否
  62.             lineStyle: {       // 属性lineStyle控制线条样式
  63.                 color: '#ccc',
  64.                 width: 1,
  65.                 type: 'solid'
  66.             }
  67.         },
  68.         axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
  69.             show: false,
  70.             textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
  71.                 color: '#333'
  72.             }
  73.         },
  74.         splitArea : {
  75.             show : true,
  76.             areaStyle : {
  77.                 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
  78.             }
  79.         },
  80.         splitLine : {
  81.             show : true,
  82.             lineStyle : {
  83.                 width : 1,
  84.                 color : '#ccc'
  85.             }
  86.         }
  87.     },

10.区域放大控制器：dataZoom

  1. dataZoom: {
  2.         orient: 'horizontal',                                  // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
  3.         x: {number},                                            // 水平安放位置，默认为根据grid参数适配，可选为： {number}（x坐标，单位px）
  4.         y: {number},                                            // 垂直安放位置，默认为根据grid参数适配，可选为：{number}（y坐标，单位px）
  5.         width: {number},                                        // 指定宽度，横向布局时默认为根据grid参数适配
  6.         height: {number},                                       // 指定高度，纵向布局时默认为根据grid参数适配
  7.         backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
  8.         dataBackgroundColor: '#eee',            // 数据背景颜色
  9.         fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
  10.         handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
  11.     },

**图形属性说明*

11.柱状图: bar

  1. bar: {
  2.         barMinHeight: 0,                                      // 最小高度改为0
  3.         barWidth: null,                                         // 默认自适应
  4.         barGap: '30%',                                     // 柱间距离，默认为柱形宽度的30%，可设固定值
  5.         barCategoryGap : '20%',                            // 类目间柱形距离，默认为类目间距的20%，可设固定值
  6.         itemStyle: {
  7.             normal: {
  8.                 color: '各异',
  9.                 barBorderColor: '#fff',        // 柱条边线
  10.                 barBorderRadius: 0,            // 柱条边线圆角，单位px，默认为0
  11.                 barBorderWidth: 1,             // 柱条边线线宽，单位px，默认为1
  12.                 label: {
  13.                     show: false
  14.                     position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为'inside'|'left'|'right'|'top'|'bottom'
  15.                    textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  16.                 }
  17.             },
  18.             emphasis: {
  19.                 color: '各异',
  20.                 barBorderColor: 'rgba(0,0,0,0)',   // 柱条边线
  21.                 barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
  22.                 barBorderWidth: 1,                 // 柱条边线线宽，单位px，默认为1
  23.                 label: {
  24.                     show: false
  25.                     position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为'inside'|'left'|'right'|'top'|'bottom'
  26.                     textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  27.                 }
  28.             }
  29.         }
  30.     },

12.折线图：line

  1. line: {
  2.         itemStyle: {
  3.             normal: {
  4.                 color: 各异,
  5.                 label: {
  6.                     show: false
  7.                     position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为 'inside'|'left'|'right'|'top'|'bottom'
  8.                     textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  9.                 },
  10.                 lineStyle: {
  11.                     width: 2,
  12.                     type: 'solid',
  13.                     shadowColor : 'rgba(0,0,0,0)', //默认透明
  14.                     shadowBlur: 5,
  15.                     shadowOffsetX: 3,
  16.                     shadowOffsetY: 3
  17.                 }
  18.             },
  19.             emphasis: {
  20.                 color: 各异,
  21.                 label: {
  22.                     show: false
  23.                     position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为'inside'|'left'|'right'|'top'|'bottom'
  24.                     textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  25.                 }
  26.             }
  27.         },
  28.         smooth : false,                //是否圆滑曲线
  29.         symbol: null,         // 拐点图形类型
  30.         symbolSize: 2,          // 拐点图形大小
  31.         symbolRotate : null,  // 拐点图形旋转控制
  32.         showAllSymbol: false    // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
  33.     },

13.K线:K

  1. k: {
  2.         barWidth : null          // 默认自适应
  3.         barMaxWidth : null       // 默认自适应
  4.         itemStyle: {
  5.             normal: {
  6.                 color: '#fff',          // 阳线填充颜色
  7.                 color0: '#00aa11',      // 阴线填充颜色
  8.                 lineStyle: {
  9.                     width: 1,
  10.                     color: '#ff3200',   // 阳线边框颜色
  11.                     color0: '#00aa11'   // 阴线边框颜色
  12.                 }
  13.             },
  14.             emphasis: {
  15.                 color: 各异,
  16.                 color0: 各异
  17.             }
  18.         }
  19.     },

14.饼图

  1. pie: {
  2.         center : ['50%', '50%'],    // 默认全局居中
  3.         radius : [0, '75%'],
  4.         clockWise : false,          // 默认逆时针
  5.         startAngle: 90,
  6.         minAngle: 0,                // 最小角度改为0
  7.         selectedOffset: 10,         // 选中是扇区偏移量
  8.         itemStyle: {
  9.             normal: {
  10.                 // color: 各异,
  11.                 borderColor: '#fff',
  12.                 borderWidth: 1,
  13.                 label: {
  14.                     show: true,
  15.                     position: 'outer'
  16.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  17.                 },
  18.                 labelLine: {
  19.                     show: true,
  20.                     length: 20,
  21.                     lineStyle: {
  22.                         // color: 各异,
  23.                         width: 1,
  24.                         type: 'solid'
  25.                     }
  26.                 }
  27.             },
  28.             emphasis: {
  29.                 // color: 各异,
  30.                 borderColor: 'rgba(0,0,0,0)',
  31.                 borderWidth: 1,
  32.                 label: {
  33.                     show: false
  34.                     // position: 'outer'
  35.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  36.                 },
  37.                 labelLine: {
  38.                     show: false,
  39.                     length: 20,
  40.                     lineStyle: {
  41.                         // color: 各异,
  42.                         width: 1,
  43.                         type: 'solid'
  44.                     }
  45.                 }
  46.             }
  47.         }
  48.     },

15.地图

  1. map: {
  2.         mapType: 'china',   // 各省的mapType暂时都用中文
  3.         mapLocation: {
  4.             x : 'center',
  5.             y : 'center'
  6.             // width    // 自适应
  7.             // height   // 自适应
  8.         },
  9.         showLegendSymbol : true,       // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
  10.         itemStyle: {
  11.             normal: {
  12.                 // color: 各异,
  13.                 borderColor: '#fff',
  14.                 borderWidth: 1,
  15.                 areaStyle: {
  16.                     color: '#ccc'//rgba(135,206,250,0.8)
  17.                 },
  18.                 label: {
  19.                     show: false,
  20.                     textStyle: {
  21.                         color: 'rgba(139,69,19,1)'
  22.                     }
  23.                 }
  24.             },
  25.             emphasis: {                 // 也是选中样式
  26.                 // color: 各异,
  27.                 borderColor: 'rgba(0,0,0,0)',
  28.                 borderWidth: 1,
  29.                 areaStyle: {
  30.                     color: 'rgba(255,215,0,0.8)'
  31.                 },
  32.                 label: {
  33.                     show: false,
  34.                     textStyle: {
  35.                         color: 'rgba(139,69,19,1)'
  36.                     }
  37.                 }
  38.             }
  39.         }
  40.     },

16.散点图默认参数：scatter

  1. scatter: {
  2.         //symbol: null,      // 图形类型
  3.         symbolSize: 4,       // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
  4.         //symbolRotate : null,  // 图形旋转控制
  5.         large: false,        // 大规模散点图
  6.         largeThreshold: 2000,// 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
  7.         itemStyle: {
  8.             normal: {
  9.                 // color: 各异,
  10.                 label: {
  11.                     show: false
  12.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
  13.                     //           'inside'|'left'|'right'|'top'|'bottom'
  14.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  15.                 }
  16.             },
  17.             emphasis: {
  18.                 // color: '各异'
  19.                 label: {
  20.                     show: false
  21.                     // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
  22.                     //           'inside'|'left'|'right'|'top'|'bottom'
  23.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  24.                 }
  25.             }
  26.         }
  27.     },

17.雷达图默认参数：radar

  1. radar : {
  2.         itemStyle: {
  3.             normal: {
  4.                 // color: 各异,
  5.                 label: {
  6.                     show: false
  7.                 },
  8.                 lineStyle: {
  9.                     width: 2,
  10.                     type: 'solid'
  11.                 }
  12.             },
  13.             emphasis: {
  14.                 // color: 各异,
  15.                 label: {
  16.                     show: false
  17.                 }
  18.             }
  19.         },
  20.         //symbol: null,         // 拐点图形类型
  21.         symbolSize: 2           // 可计算特性参数，空数据拖拽提示图形大小
  22.         //symbolRotate : null,  // 图形旋转控制
  23.     },

18.默认标志图形类型列表:symbolList

  1. symbolList : [
  2.      'circle', 'rectangle', 'triangle', 'diamond',
  3.        'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
  4.      ],

19.可计算特性配置，孤岛，提示颜色:calculable

  1. calculable: false,              // 默认关闭可计算特性
  2.     calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
  3.     calculableHolderColor: '#ccc', // 可计算占位提示颜色
  4.     nameConnector: ' & ',
  5.     valueConnector: ' : ',
  6.     animation: true,
  7.     animationThreshold: 2500,       // 动画元素阀值，产生的图形原素超过2500不出动画
  8.     addDataAnimation: true,         // 动态数据接口是否开启动画效果
  9.     animationDuration: 2000,
  10.     animationEasing: 'ExponentialOut'    //BounceOut

20.其他

  1.   force : {
  2.         // 数据map到圆的半径的最小值和最大值
  3.         minRadius : 10,
  4.         maxRadius : 20,
  5.         density : 1.0,
  6.         attractiveness : 1.0,
  7.         // 初始化的随机大小位置
  8.         initSize : 300,
  9.         // 向心力因子，越大向心力越大
  10.         centripetal : 1,
  11.         // 冷却因子
  12.         coolDown : 0.99,
  13.         // 分类里如果有样式会覆盖节点默认样式
  14.         itemStyle: {
  15.             normal: {
  16.                 // color: 各异,
  17.                 label: {
  18.                     show: false
  19.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  20.                 },
  21.                 nodeStyle : {
  22.                     brushType : 'both',
  23.                     color : '#f08c2e',
  24.                     strokeColor : '#5182ab'
  25.                 },
  26.                 linkStyle : {
  27.                     strokeColor : '#5182ab'
  28.                 }
  29.             },
  30.             emphasis: {
  31.                 // color: 各异,
  32.                 label: {
  33.                     show: false
  34.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  35.                 },
  36.                 nodeStyle : {},
  37.                 linkStyle : {}
  38.             }
  39.         }
  40.     },
  42.     chord : {
  43.         radius : ['65%', '75%'],
  44.         center : ['50%', '50%'],
  45.         padding : 2,
  46.         sort : 'none', // can be 'none', 'ascending', 'descending'
  47.         sortSub : 'none', // can be 'none', 'ascending', 'descending'
  48.         startAngle : 90,
  49.         clockWise : false,
  50.         showScale : false,
  51.         showScaleText : false,
  52.         itemStyle : {
  53.             normal : {
  54.                 label : {
  55.                     show : true
  56.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  57.                 },
  58.                 lineStyle : {
  59.                     width : 0,
  60.                     color : '#000'
  61.                 },
  62.                 chordStyle : {
  63.                     lineStyle : {
  64.                         width : 1,
  65.                         color : '#666'
  66.                     }
  67.                 }
  68.             },
  69.             emphasis : {
  70.                 lineStyle : {
  71.                     width : 0,
  72.                     color : '#000'
  73.                 },
  74.                 chordStyle : {
  75.                     lineStyle : {
  76.                         width : 2,
  77.                         color : '#333'
  78.                     }
  79.                 }
  80.             }
  81.         }
  82.     },
  84.     island: {
  85.         r: 15,
  86.         calculateStep: 0.1  // 滚轮可计算步长 0.1 = 10%
  87.     },
  89.     markPoint : {
  90.         symbol: 'pin',         // 标注类型
  91.         symbolSize: 10,        // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
  92.         //symbolRotate : null, // 标注旋转控制
  93.         itemStyle: {
  94.             normal: {
  95.                 // color: 各异，
  96.                 // borderColor: 各异,     // 标注边线颜色，优先于color
  97.                 borderWidth: 2,            // 标注边线线宽，单位px，默认为1
  98.                 label: {
  99.                     show: true,
  100.                     position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
  101.                     // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
  102.                 }
  103.             },
  104.             emphasis: {
  105.                 // color: 各异
  106.                 label: {
  107.                     show: true
  108.                     // position: 'inside'  // 'left'|'right'|'top'|'bottom'
  109.                     // textStyle: null     // 默认使用全局文本样式，详见TEXTSTYLE
  110.                 }
  111.             }
  112.         }
  113.     },
  115.     markLine : {
  116.         // 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
  117.         symbol: ['circle', 'arrow'],
  118.         // 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
  119.         symbolSize: [2, 4],
  120.         // 标线起始和结束的symbol旋转控制
  121.         //symbolRotate : null,
  122.         itemStyle: {
  123.             normal: {
  124.                 // color: 各异,           // 标线主色，线色，symbol主色
  125.                 // borderColor: 随color,     // 标线symbol边框颜色，优先于color
  126.                 borderWidth: 2,          // 标线symbol边框线宽，单位px，默认为2
  127.                 label: {
  128.                     show: false,
  129.                     // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
  130.                     position: 'inside',
  131.                     textStyle: {         // 默认使用全局文本样式，详见TEXTSTYLE
  132.                         color: '#333'
  133.                     }
  134.                 },
  135.                 lineStyle: {
  136.                     // color: 随borderColor, // 主色，线色，优先级高于borderColor和color
  137.                     // width: 随borderWidth, // 优先于borderWidth
  138.                     type: 'solid',
  139.                     shadowColor : 'rgba(0,0,0,0)', //默认透明
  140.                     shadowBlur: 5,
  141.                     shadowOffsetX: 3,
  142.                     shadowOffsetY: 3
  143.                 }
  144.             },
  145.             emphasis: {
  146.                 // color: 各异
  147.                 label: {
  148.                     show: false
  149.                     // position: 'inside' // 'left'|'right'|'top'|'bottom'
  150.                     // textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
  151.                 },
  152.                 lineStyle : {}
  153.             }
  154.         }
  155.     },
  157.     textStyle: {
  158.         decoration: 'none',
  159.         fontFamily: 'Arial, Verdana, sans-serif',
  160.         fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
  161.         fontSize: 12,
  162.         fontStyle: 'normal',
  163.         fontWeight: 'normal'
  164.     },