1. VueEchart组件见上一篇
  1. <template>
  2. <VueEcharts :options="options" auto-resize />
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. data () {
  8. const title = {
  9. // show: true, //是否显示
  10. text: "画布关系图", //大标题
  11. subtext: "图形可拖动、缩放", //小标题
  12. // sublink: "http://www.baidu.com", //小标题链接
  13. // target: "blank", //'self' 当前窗口打开,'blank' 新窗口打开
  14. // subtarget: "blank", //小标题打开链接的窗口
  15. // textAlign: "center", //文本水平对齐
  16. // textBaseline: "top", //文本垂直对齐
  17. // textStyle: mytextStyle, //标题样式
  18. // subtextStyle: mytextStyle, //小标题样式
  19. // padding: 5, //标题内边距 5 [5, 10] [5,10,5,10]
  20. // itemGap: 10, //大小标题间距
  21. // zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  22. // z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
  23. // left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  24. // top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  25. // right: "auto", //组件离容器右侧的距离,'20%'
  26. // bottom: "auto", //组件离容器下侧的距离,'20%'
  27. // backgroundColor: "transparent", //标题背景色
  28. // borderColor: "#ccc", //边框颜色
  29. // borderWidth: 0, //边框线宽
  30. // shadowColor: "red", //阴影颜色
  31. // shadowOffsetX: 0, //阴影水平方向上的偏移距离
  32. // shadowOffsetY: 0, //阴影垂直方向上的偏移距离
  33. // shadowBlur: 10, //阴影的模糊大小
  34. };
  35. const tooltip = { //提示框组件
  36. trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
  37. // triggerOn: "mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
  38. // showContent: true, //是否显示提示框浮层
  39. // alwaysShowContent: true, //是否永远显示提示框内容
  40. // showDelay: 0, //浮层显示的延迟,单位为 ms
  41. // hideDelay: 100, //浮层隐藏的延迟,单位为 ms
  42. // enterable: false, //鼠标是否可进入提示框浮层中
  43. // confine: false, //是否将 tooltip 框限制在图表的区域内
  44. // transitionDuration: 0.4, //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
  45. // position: ['50%', '50%'], //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
  46. formatter: "{b}", //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等<br />{b1}: {c1}
  47. // backgroundColor: "transparent", //标题背景色
  48. // borderColor: "#ccc", //边框颜色
  49. // borderWidth: 0, //边框线宽
  50. // padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10]
  51. // textStyle: mytextStyle, //文本样式
  52. };
  53. const toolbox = {
  54. // show: true, //是否显示工具栏组件
  55. orient: "horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'
  56. // itemSize: 15, //工具栏 icon 的大小
  57. // itemGap: 10, //工具栏 icon 每项之间的间隔
  58. // showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
  59. feature: {
  60. mark: { // '辅助线开关'
  61. show: true
  62. },
  63. dataView: { //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新
  64. show: true, //是否显示该工具。
  65. title: "数据视图",
  66. readOnly: false, //是否不可编辑(只读)
  67. lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']
  68. backgroundColor: "#fff", //数据视图浮层背景色。
  69. textareaColor: "#fff", //数据视图浮层文本输入区背景色
  70. textareaBorderColor: "#333", //数据视图浮层文本输入区边框颜色
  71. textColor: "#000", //文本颜色。
  72. buttonColor: "#c23531", //按钮颜色。
  73. buttonTextColor: "#fff", //按钮文本颜色。
  74. },
  75. magicType: { //动态类型切换
  76. show: true,
  77. title: "切换", //各个类型的标题文本,可以分别配置。
  78. type: ['line', 'bar'], //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)
  79. },
  80. restore: { //配置项还原。
  81. show: true, //是否显示该工具。
  82. title: "还原",
  83. },
  84. saveAsImage: { //保存为图片。
  85. show: true, //是否显示该工具。
  86. type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。
  87. name: "pic1", //保存的文件名称,默认使用 title.text 作为名称
  88. backgroundColor: "#ffffff", //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
  89. title: "保存为图片",
  90. pixelRatio: 1 //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
  91. },
  92. dataZoom: { //数据区域缩放。目前只支持直角坐标系的缩放
  93. show: true, //是否显示该工具。
  94. title: "缩放", //缩放和还原的标题文本
  95. xAxisIndex: 0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
  96. yAxisIndex: false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
  97. },
  98. },
  99. // zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  100. // z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
  101. // left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  102. // top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  103. right: "2%", //组件离容器右侧的距离,'20%'
  104. // bottom: "auto", //组件离容器下侧的距离,'20%'
  105. // width: "auto", //图例宽度
  106. // height: "auto", //图例高度
  107. };
  108. const legend = {
  109. // show: true, //是否显示
  110. // zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  111. // z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
  112. // left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  113. // top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  114. // right: "auto", //组件离容器右侧的距离,'20%'
  115. // bottom: "auto", //组件离容器下侧的距离,'20%'
  116. // width: "auto", //图例宽度
  117. // height: "auto", //图例高度
  118. // orient: "horizontal", //图例排列方向
  119. // align: "auto", //图例标记和文本的对齐,left,right
  120. // padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10]
  121. // itemGap: 10, //图例每项之间的间隔
  122. // itemWidth: 25, //图例标记的图形宽度
  123. // itemHeight: 14, //图例标记的图形高度
  124. // formatter: function (name) { //用来格式化图例文本,支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
  125. // return 'Legend ' + name;
  126. // },
  127. // selectedMode: "single", //图例选择的模式,true开启,false关闭,single单选,multiple多选
  128. // inactiveColor: "#ccc", //图例关闭时的颜色
  129. // textStyle: mytextStyle, //文本样式
  130. data: ['当前特征', '个人特征', '公共特征', '特征画布'], //series中根据名称区分
  131. // backgroundColor: "transparent", //标题背景色
  132. // borderColor: "#ccc", //边框颜色
  133. // borderWidth: 0, //边框线宽
  134. // shadowColor: "red", //阴影颜色
  135. // shadowOffsetX: 0, //阴影水平方向上的偏移距离
  136. // shadowOffsetY: 0, //阴影垂直方向上的偏移距离
  137. // shadowBlur: 10, //阴影的模糊大小
  138. };
  139. const dataZoom = [ //区域缩放
  140. {
  141. id: 'dataZoomX',
  142. show: true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
  143. backgroundColor: "rgba(47,69,84,0)", //组件的背景颜色
  144. type: 'slider', //slider表示有滑动块的,inside表示内置的
  145. dataBackground: { //数据阴影的样式。
  146. lineStyle: mylineStyle, //阴影的线条样式
  147. areaStyle: myareaStyle, //阴影的填充样式
  148. },
  149. fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
  150. borderColor: "#ddd", //边框颜色。
  151. filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
  152. //'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
  153. //'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。
  154. //'none': 不过滤数据,只改变数轴范围。
  155. xAxisIndex: 0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
  156. yAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
  157. radiusAxisIndex: 3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
  158. angleAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
  159. start: 30, //数据窗口范围的起始百分比,表示30%
  160. end: 70, //数据窗口范围的结束百分比,表示70%
  161. startValue: 10, //数据窗口范围的起始数值
  162. endValue: 100, //数据窗口范围的结束数值。
  163. orient: "horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
  164. zoomLock: false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
  165. throttle: 100, //设置触发视图刷新的频率。单位为毫秒(ms)。
  166. zoomOnMouseWheel: true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
  167. moveOnMouseMove: true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
  168. left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  169. top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  170. right: "auto", //组件离容器右侧的距离,'20%'
  171. bottom: "auto", //组件离容器下侧的距离,'20%'
  172. },
  173. {
  174. id: 'dataZoomY',
  175. type: 'inside',
  176. filterMode: 'empty',
  177. disabled: false, //是否停止组件的功能。
  178. xAxisIndex: 0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
  179. yAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
  180. radiusAxisIndex: 3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
  181. angleAxisIndex: [0, 2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
  182. start: 30, //数据窗口范围的起始百分比,表示30%
  183. end: 70, //数据窗口范围的结束百分比,表示70%
  184. startValue: 10, //数据窗口范围的起始数值
  185. endValue: 100, //数据窗口范围的结束数值。
  186. orient: "horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
  187. zoomLock: false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
  188. throttle: 100, //设置触发视图刷新的频率。单位为毫秒(ms)。
  189. zoomOnMouseWheel: true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
  190. moveOnMouseMove: true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
  191. }
  192. ];
  193. const visualMap = [ //视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素。视觉元素可以是:symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
  194. // colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物(如文字标签)的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
  195. {
  196. show: true, //是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在
  197. type: 'continuous', // 定义为连续型 viusalMap
  198. min: 10, //指定 visualMapContinuous 组件的允许的最小值
  199. max: 100, //指定 visualMapContinuous 组件的允许的最大值
  200. range: [15, 40], //指定手柄对应数值的位置。range 应在 min max 范围内
  201. calculable: true, //是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
  202. realtime: true, //拖拽时,是否实时更新
  203. inverse: false, //是否反转 visualMap 组件
  204. precision: 0, //数据展示的小数精度,默认为0,无小数点
  205. itemWidth: 20, //图形的宽度,即长条的宽度。
  206. itemHeight: 140, //图形的高度,即长条的高度。
  207. align: "auto", //指定组件中手柄和文字的摆放位置.可选值为:'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
  208. text: ['High', 'Low'], //两端的文本
  209. textGap: 10, //两端文字主体之间的距离,单位为px
  210. dimension: 2, //指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
  211. seriesIndex: 1, //指定取哪个系列的数据,即哪个系列的 series.data,默认取所有系列
  212. hoverLink: true, //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮
  213. inRange: { //定义 在选中范围中 的视觉元素
  214. color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  215. symbolSize: [30, 100]
  216. },
  217. outOfRange: { //定义 在选中范围外 的视觉元素。
  218. color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  219. symbolSize: [30, 100]
  220. },
  221. zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  222. z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
  223. left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  224. top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  225. right: "auto", //组件离容器右侧的距离,'20%'
  226. bottom: "auto", //组件离容器下侧的距离,'20%'
  227. orient: "vertical", //图例排列方向
  228. padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10]
  229. backgroundColor: "transparent", //标题背景色
  230. borderColor: "#ccc", //边框颜色
  231. borderWidth: 0, //边框线宽
  232. textStyle: mytextStyle, //文本样式
  233. formatter: function (value) { //标签的格式化工具。
  234. return 'aaaa' + value; // 范围标签显示内容。
  235. }
  236. },
  237. {
  238. show: true, //是否显示 visualMap-continuous 组件。如果设置为 false,不会显示,但是数据映射的功能还存在
  239. type: 'piecewise', // 定义为分段型 visualMap
  240. splitNumber: 5, //对于连续型数据,自动平均切分成几段。默认为5段
  241. pieces: [ //自定义『分段式视觉映射组件(visualMapPiecewise)』的每一段的范围,以及每一段的文字,以及每一段的特别的样式
  242. { min: 1500 }, // 不指定 max,表示 max 为无限大(Infinity)。
  243. { min: 900, max: 1500 },
  244. { min: 310, max: 1000 },
  245. { min: 200, max: 300 },
  246. { min: 10, max: 200, label: '10 到 200(自定义label)' },
  247. { value: 123, label: '123(自定义特殊颜色)', color: 'grey' }, // 表示 value 等于 123 的情况。
  248. { max: 5 } // 不指定 min,表示 min 为无限大(-Infinity)。
  249. ],
  250. categories: ['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'], //用于表示离散型数据(或可以称为类别型数据、枚举型数据)的全集
  251. min: 10, //指定 visualMapContinuous 组件的允许的最小值
  252. max: 100, //指定 visualMapContinuous 组件的允许的最大值
  253. minOpen: true, //界面上会额外多出一个『< min』的选块
  254. maxOpen: true, //界面上会额外多出一个『> max』的选块。
  255. selectedMode: "multiple", //选择模式,可以是:'multiple'(多选)。'single'(单选)。
  256. inverse: false, //是否反转 visualMap 组件
  257. precision: 0, //数据展示的小数精度,默认为0,无小数点
  258. itemWidth: 20, //图形的宽度,即长条的宽度。
  259. itemHeight: 140, //图形的高度,即长条的高度。
  260. align: "auto", //指定组件中手柄和文字的摆放位置.可选值为:'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
  261. text: ['High', 'Low'], //两端的文本
  262. textGap: 10, //两端文字主体之间的距离,单位为px
  263. showLabel: true, //是否显示每项的文本标签
  264. itemGap: 10, //每两个图元之间的间隔距离,单位为px
  265. itemSymbol: "roundRect", //默认的图形。可选值为: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  266. dimension: 2, //指定用数据的『哪个维度』,映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
  267. seriesIndex: 1, //指定取哪个系列的数据,即哪个系列的 series.data,默认取所有系列
  268. hoverLink: true, //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮
  269. inRange: { //定义 在选中范围中 的视觉元素
  270. color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  271. symbolSize: [30, 100]
  272. },
  273. outOfRange: { //定义 在选中范围外 的视觉元素。
  274. color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  275. symbolSize: [30, 100]
  276. },
  277. zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  278. z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
  279. left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  280. top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  281. right: "auto", //组件离容器右侧的距离,'20%'
  282. bottom: "auto", //组件离容器下侧的距离,'20%'
  283. orient: "vertical", //图例排列方向
  284. padding: 5, //图例内边距,单位px 5 [5, 10] [5,10,5,10]
  285. backgroundColor: "transparent", //标题背景色
  286. borderColor: "#ccc", //边框颜色
  287. borderWidth: 0, //边框线宽
  288. textStyle: mytextStyle, //文本样式
  289. formatter: function (value) { //标签的格式化工具。
  290. return 'aaaa' + value; // 范围标签显示内容。
  291. }
  292. }
  293. ];
  294. const mytextStyle = {
  295. color: "#333", //文字颜色
  296. fontStyle: "normal", //italic斜体 oblique倾斜
  297. fontWeight: "normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400...
  298. fontFamily: "sans-serif", //字体系列
  299. fontSize: 18, //字体大小
  300. };
  301. const mylineStyle = {
  302. color: "#333", //颜色,'rgb(128, 128, 128)','rgba(128, 128, 128, 0.5)',支持线性渐变,径向渐变,纹理填充
  303. shadowColor: "red", //阴影颜色
  304. shadowOffsetX: 0, //阴影水平方向上的偏移距离。
  305. shadowOffsetY: 0, //阴影垂直方向上的偏移距离
  306. shadowBlur: 10, //图形阴影的模糊大小。
  307. type: "solid", //坐标轴线线的类型,solid,dashed,dotted
  308. width: 1, //坐标轴线线宽
  309. opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
  310. };
  311. const myareaStyle = {
  312. color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
  313. shadowColor: "red", //阴影颜色
  314. shadowOffsetX: 0, //阴影水平方向上的偏移距离。
  315. shadowOffsetY: 0, //阴影垂直方向上的偏移距离
  316. shadowBlur: 10, //图形阴影的模糊大小。
  317. opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
  318. };
  319. const myitemStyle = {
  320. color: "blue", //颜色
  321. borderColor: "#000", //边框颜色
  322. borderWidth: 0, //柱条的描边宽度,默认不描边。
  323. borderType: "solid", //柱条的描边类型,默认为实线,支持 'dashed', 'dotted'。
  324. barBorderRadius: 0, //柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。
  325. shadowBlur: 10, //图形阴影的模糊大小。
  326. shadowColor: "#000", //阴影颜色
  327. shadowOffsetX: 0, //阴影水平方向上的偏移距离。
  328. shadowOffsetY: 0, //阴影垂直方向上的偏移距离。
  329. opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
  330. };
  331. const mylabel = {
  332. show: false, //是否显示标签。
  333. position: "inside", //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
  334. offset: [30, 40], //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
  335. formatter: '{b}: {c}', //标签内容格式器。模板变量有 {a}、{b}、{c},分别表示系列名,数据名,数据值。
  336. textStyle: mytextStyle
  337. };
  338. const mypoint = {
  339. symbol: "pin", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  340. symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  341. symbolRotate: 0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
  342. symbolOffset: [0, 0], //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
  343. silent: false, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
  344. label: {
  345. normal: mylabel,
  346. emphasis: mylabel
  347. },
  348. itemStyle: {
  349. normal: myitemStyle,
  350. emphasis: myitemStyle
  351. }
  352. };
  353. const myline = {
  354. symbol: ["pin", "circle"], //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  355. symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  356. precision: 2, //标线数值的精度,在显示平均值线的时候有用。
  357. silent: false, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
  358. label: {
  359. normal: mylabel,
  360. emphasis: mylabel
  361. },
  362. lineStyle: {
  363. normal: mylineStyle,
  364. emphasis: mylineStyle
  365. }
  366. };
  367. const myarea = {
  368. silent: false, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
  369. label: {
  370. normal: mylabel,
  371. emphasis: mylabel
  372. },
  373. itemStyle: {
  374. normal: myitemStyle,
  375. emphasis: myitemStyle
  376. }
  377. };
  378. return {
  379. options: {
  380. title: title,// 标题设置
  381. tooltip: tooltip,// 节点悬浮提示
  382. // toolbox: toolbox,// 切换下载
  383. legend: legend,// 分组筛选提示
  384. // dataZoom: dataZoom,// 可缩放
  385. // visualMap: visualMap,// 地图映射
  386. animationDurationUpdate: 1500, // 动画的时长。
  387. animationEasingUpdate: 'quinticInOut', // 动画的加载效果
  388. // hasChanged: false,
  389. // flag: false,
  390. series: [
  391. {
  392. type: "graph", //关系图
  393. // zlevel: 0, //柱状图所有图形的 zlevel 值。
  394. // z: 2, //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
  395. // left: "10%", //组件离容器左侧的距离,百分比字符串或整型数字
  396. top: '15%', //组件离容器上侧的距离,百分比字符串或整型数字
  397. // right: "auto", //组件离容器右侧的距离,百分比字符串或整型数字
  398. bottom: "15%", //组件离容器下侧的距离,百分比字符串或整型数字
  399. // width: "auto", //图例宽度
  400. // height: "auto", //图例高度
  401. // silent: false, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
  402. // name: "公共特征", //系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
  403. // legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
  404. // hoverAnimation: true, //是否开启鼠标 hover 节点的提示动画效果。
  405. // coordinateSystem: null, //null无坐标系,'cartesia个人特征d'使用二维的直角坐标系。'geo'使用地理坐标系,'polar'使用极坐标系
  406. // xAxisIndex: 0, //使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
  407. // yAxisIndex: 0, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
  408. // polarIndex: 0, //使用的极坐标系的 index,在单个图表实例中存在多个极坐标系的时候有用。
  409. // geoIndex: 0, //使用的地理坐标系的 index,在单个图表实例中存在多个地理坐标系的时候有用。
  410. // calendarIndex: 0, //使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。
  411. layout: 'circular', //'none' 不采用任何布局,使用节点中提供的 x, y 作为节点的位置.'circular' 采用环形布局,'force' 采用力引导布局。
  412. //circular:{}, //环形布局相关配置
  413. //force:{}, //力引导布局相关的配置项
  414. roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
  415. nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放
  416. // draggable: true, //节点是否可拖拽,只在使用力引导布局的时候有用。
  417. // focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。放大
  418. symbol: "circle", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  419. symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  420. // symbolRotate: 0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
  421. // symbolOffset: [0, 0], //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
  422. edgeSymbol: ['', 'arrow'],//边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头
  423. // edgeSymbolSize: [5, 2], //边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
  424. cursor: "pointer", //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
  425. label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
  426. // normal: mylabel,
  427. // emphasis: mylabel
  428. },
  429. edgeLabel: { // 显示线中间的标签
  430. // show: true,
  431. // normal: mylabel,
  432. // emphasis: mylabel
  433. },
  434. emphasis: { // 悬浮出现的高亮的图形样式。
  435. // lineStyle: mylineStyle,
  436. // itemStyle: myitemStyle,
  437. // label: mylineStyle,
  438. // edgeLabel: mylineStyle,
  439. },
  440. itemStyle: { //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
  441. // normal: myitemStyle,
  442. // emphasis: myitemStyle,
  443. },
  444. lineStyle: { //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
  445. // normal: mylineStyle,
  446. // emphasis: mylineStyle,
  447. },
  448. categories: [ //节点分类的类目,可选。
  449. {
  450. name: "当前特征", //类目名称
  451. // symbol: "circle", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  452. // symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  453. // symbolRotate: 0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
  454. // symbolOffset: [0, 0], //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
  455. // label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
  456. // normal: mylabel,
  457. // emphasis: mylabel
  458. // },
  459. // itemStyle: { //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
  460. // normal: myitemStyle,
  461. // emphasis: myitemStyle,
  462. // },
  463. },
  464. {
  465. name: "个人特征", //类目名称
  466. // symbol: "rect", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  467. // symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  468. // symbolRotate: 0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
  469. // symbolOffset: [0, 0], //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
  470. // label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
  471. // normal: mylabel,
  472. // emphasis: mylabel
  473. // },
  474. // itemStyle: { //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
  475. // normal: myitemStyle,
  476. // emphasis: myitemStyle,
  477. // },
  478. },
  479. {
  480. name: "公共特征", //类目名称
  481. // symbol: "roundRect", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  482. // symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  483. // symbolRotate: 0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
  484. // symbolOffset: [0, 0], //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
  485. // label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
  486. // normal: mylabel,
  487. // emphasis: mylabel
  488. // },
  489. // itemStyle: { //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
  490. // normal: myitemStyle,
  491. // emphasis: myitemStyle,
  492. // },
  493. },
  494. {
  495. name: "特征画布", //类目名称
  496. // symbol: "pin", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  497. // symbolSize: 50, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
  498. // symbolRotate: 0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
  499. // symbolOffset: [0, 0], //标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置
  500. // label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,
  501. // normal: mylabel,
  502. // emphasis: mylabel
  503. // },
  504. // itemStyle: { //图形样式,normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
  505. // normal: myitemStyle,
  506. // emphasis: myitemStyle,
  507. // },
  508. },
  509. ],
  510. data: [ //data就是node
  511. {
  512. name: '当前特征',
  513. // x: 100,
  514. // y: 100,
  515. // value: 20,
  516. // symbolSize: 20,
  517. itemStyle: {
  518. normal: {
  519. color: 'blank'
  520. }
  521. }
  522. }, {
  523. name: '个人特征',
  524. // x: 100,
  525. // y: 100,
  526. // value: 20,
  527. // symbolSize: 20,
  528. itemStyle: {
  529. normal: {
  530. color: '#15a4fa'
  531. }
  532. }
  533. }, {
  534. name: '公共特征',
  535. // x: 100,
  536. // y: 100,
  537. // value: 20,
  538. // symbolSize: 20,
  539. itemStyle: {
  540. color: 'blue'
  541. }
  542. }, {
  543. name: '特征画布',
  544. // x: 100,
  545. // y: 100,
  546. // value: 20,
  547. // symbolSize: 100,
  548. itemStyle: {
  549. color: 'red'
  550. }
  551. }
  552. ],
  553. links: [ //links就是edges
  554. {
  555. source: '当前特征',
  556. target: '个人特征'
  557. }, {
  558. source: '当前特征',
  559. target: '公共特征'
  560. }, {
  561. source: '当前特征',
  562. target: '特征画布'
  563. }
  564. ],
  565. //markPoint:同bar
  566. //markLine:同bar
  567. //markArea:同bar
  568. // tooltip: tooltip
  569. },
  570. ]
  571. }
  572. };
  573. },
  574. mounted () { }
  575. }
  576. </script>

echart——关系图graph详解的更多相关文章

  1. 腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

    本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...

  2. Typora+图床详解(小白都能学得会)

    Typora+图床详解(小白都能学得会) 1 了解工作 博客中用的笔记软件--Typora(Markdown语法) 博客中用的图床--阿里云对象存储(Object Storage Service,简称 ...

  3. python编写微信公众号首图思路详解

    前言 之前一直在美图秀秀调整自己的微信公众号首图,效果也不尽如人意,老是调来调去,最后发出来的图片被裁剪了一大部分,丢失部分关键信息,十分恼火,于是想着用python写一个程序,把微信公众号首图的模式 ...

  4. JAVA类与类之间的全部关系简述+代码详解

    本文转自: https://blog.csdn.net/wq6ylg08/article/details/81092056类和类之间关系包括了 is a,has a, use a三种关系(1)is a ...

  5. ps切图抠图详解-web前端(转)

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  6. storm源码之理解Storm中Worker、Executor、Task关系 + 并发度详解

    本文导读: 1 Worker.Executor.task详解 2 配置拓扑的并发度 3 拓扑示例 4 动态配置拓扑并发度 Worker.Executor.Task详解: Storm在集群上运行一个To ...

  7. LDA与最小二乘法的关系及其变种详解

    1 LDA与最小二乘法的关联 对于二值分类问题,令人惊奇的是最小二乘法和LDA分析是一致的.回顾之前的线性回归,给定N个d维特征的训练样例(i从1到N),每个对应一个类标签.我们之前令y=0表示一类, ...

  8. echart关系图平分节点删除时自动平衡问题

    项目场景: 项目场景:Echarts关系图中(不是力图)一个节点x,y是固定的,为了同一列能居中显示,规定:当前列有奇数个元素新节点往下放,有偶数个节点时新节点往上放. 问题描述: 删除中间节点会有空 ...

  9. TensorFlow框架之Computational Graph详解

    1. Getting Start 1.1 import TensorFlow应用程序需要引入编程架包,才能访问TensorFlow的类.方法和符号.如下所示的方法: import tensorflow ...

随机推荐

  1. LDFLAGS 与 LDLIBS

    今天下载了开源程序“贪吃蛇” (github地址 : https://github.com/taylorconor/tinytetris.git) 在编译时,出现如下错 linux:~/code/ot ...

  2. 零基础学Python-第一章 :Python介绍和安装-03.Python的安装

    官方版本的python下载以及安装方法,以及pycharm的安装和打开. 社区版就可以完全支持我们的需求了. 点击左侧的图片到右边. 在命令行输入python3 exit() 退出命令行的编辑器. p ...

  3. matlab优化函数fminunc

    一起来学演化计算-matlab优化函数fminunc 觉得有用的话,欢迎一起讨论相互学习~Follow Me fminunc 求无约束多变量函数的最小值 非线性编程求解器 找到指定问题的最小值,\(m ...

  4. 实现不同的项目,用不同的git 账号提交

    可以全局配置一个git 账户名和密码,然后在具体项目里单独配置一个账户名和密码 例如: git config --global user.name "winyh" git conf ...

  5. 数据标记系列——图像分割 & Curve-GCN

    在之前的文章中(参考:),我们提到了Polygon-RNN++在数据标注中的应用.今天不得不提到多伦多大学与英伟达联合公布的一项最新研究:Curve-GCN的应用结果显示图像标注速度提升10倍. Cu ...

  6. app--Android 稳定性测试方案

    标准的崩溃日志:Android 应用一般使用 Java 语言开发,在不作特殊处理的情况下,遇到未处理的异常时,会弹框提示“程序遇到异常,即将退出”(有些手机框中提示语不同, 或不弹框).同时会将异常的 ...

  7. Yii2性能优化

    https://www.yiiframework.com/doc/guide/2.0/zh-cn/tutorial-performance-tuning 性能优化 有许多因素影响你的 Web 应用程序 ...

  8. Winsock.简单UDP

    PS:vs2017 编译C++代码 支持 XP:项目属性-->链接器-->系统-->需要的最小版本--> 输入 "5.1" 1.ZC:测试:c向s 发送长度 ...

  9. pod 常用指令

    //只安装新增的库,已经安装的库不更新 pod install --verbose --no-repo-update //只更新指定库名的第三个库,其他库不更新 pod update 库名 --ver ...

  10. 客户端连接Codis集群

    新建maven webapp项目 添加相关依赖: <dependency> <groupId>redis.clients</groupId> <artifac ...