echart 图谱_echart——关系图graph详解

data () {

const title={//show: true, //是否显示

text: "画布关系图", //大标题

subtext: "图形可拖动、缩放", //小标题

//sublink: "http://www.baidu.com", //小标题链接

//target: "blank", //'self' 当前窗口打开，'blank' 新窗口打开

//subtarget: "blank", //小标题打开链接的窗口

//textAlign: "center", //文本水平对齐

//textBaseline: "top", //文本垂直对齐

//textStyle: mytextStyle, //标题样式

//subtextStyle: mytextStyle, //小标题样式

//padding: 5, //标题内边距 5 [5, 10] [5,10,5,10]

//itemGap: 10, //大小标题间距

//zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

//z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖

//left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'

//top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

//right: "auto", //组件离容器右侧的距离,'20%'

//bottom: "auto", //组件离容器下侧的距离,'20%'

//backgroundColor: "transparent", //标题背景色

//borderColor: "#ccc", //边框颜色

//borderWidth: 0, //边框线宽

//shadowColor: "red", //阴影颜色

//shadowOffsetX: 0, //阴影水平方向上的偏移距离

//shadowOffsetY: 0, //阴影垂直方向上的偏移距离

//shadowBlur: 10, //阴影的模糊大小

};

const tooltip= { //提示框组件

trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

//triggerOn: "mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发

//showContent: true, //是否显示提示框浮层

//alwaysShowContent: true, //是否永远显示提示框内容

//showDelay: 0, //浮层显示的延迟，单位为 ms

//hideDelay: 100, //浮层隐藏的延迟，单位为 ms

//enterable: false, //鼠标是否可进入提示框浮层中

//confine: false, //是否将 tooltip 框限制在图表的区域内

//transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动

//position: ['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，

formatter: "{b}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
{b1}: {c1}

//backgroundColor: "transparent", //标题背景色

//borderColor: "#ccc", //边框颜色

//borderWidth: 0, //边框线宽

//padding: 5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]

//textStyle: mytextStyle, //文本样式

};

const toolbox={//show: true, //是否显示工具栏组件

orient: "horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'

//itemSize: 15, //工具栏 icon 的大小

//itemGap: 10, //工具栏 icon 每项之间的间隔

//showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题

feature: {

mark: {//'辅助线开关'

show: true},

dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新

show: true, //是否显示该工具。

title: "数据视图",

readOnly:false, //是否不可编辑(只读)

lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']

backgroundColor: "#fff", //数据视图浮层背景色。

textareaColor: "#fff", //数据视图浮层文本输入区背景色

textareaBorderColor: "#333", //数据视图浮层文本输入区边框颜色

textColor: "#000", //文本颜色。

buttonColor: "#c23531", //按钮颜色。

buttonTextColor: "#fff", //按钮文本颜色。

},

magicType: {//动态类型切换

show: true,

title:"切换", //各个类型的标题文本，可以分别配置。

type: ['line', 'bar'], //启用的动态类型，包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)

},

restore: {//配置项还原。

show: true, //是否显示该工具。

title: "还原",

},

saveAsImage: {//保存为图片。

show: true, //是否显示该工具。

type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。

name: "pic1", //保存的文件名称，默认使用 title.text 作为名称

backgroundColor: "#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色

title: "保存为图片",

pixelRatio:1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2

},

dataZoom: {//数据区域缩放。目前只支持直角坐标系的缩放

show: true, //是否显示该工具。

title: "缩放", //缩放和还原的标题文本

xAxisIndex: 0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴

yAxisIndex: false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴

},

},//zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

//z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖

//left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'

//top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

right: "2%", //组件离容器右侧的距离,'20%'

//bottom: "auto", //组件离容器下侧的距离,'20%'

//width: "auto", //图例宽度

//height: "auto", //图例高度

};

const legend={//show: true, //是否显示

//zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

//z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖

//left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'

//top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

//