Echarts3 使用详解

因为项目需要，要求实现类似力导图效果的图，我就瞄上了echarts。

注意事项1：由于我的项目要部署到内网，所以js文件要在本地，网上大多力导图都是echarts2的，而其又依赖zrender基础库，下载的echarts2是2.2.7版本，但是去zrender官网下载的2.1版本，用起来说版本最低要求2.1.1,下载最新又提示缺少文件，引用网页js反而没事儿，于是只能选择echarts3了。

注意事项2：echarts2到echarts3有许多改动的地方，首先echarts3没有force了，而是把force归类在graph(关系图)下了,其次myChart.on()方法的事件简化了，也有其他方法改动等在此就不一一赘述了，文档介绍的很清楚。

注意事项3：因为我采用的是标签式单文件引入(<script src="路径/echarts.js></script>")，所以也不用require()方法去加载，echarts对象直接用就可以了。

注意事项4：echarts3的api网址：http://echarts.baidu.com/option.html#title，最常用的api在配置项手册中，了解了配置项手册的东西就能应付大部分应用了，而api选项是一些特殊的方法，也就是不常用的，以下是我啃了3天api的成果，我只把有关力导图的代码贴出来了，不知道能不能用，我几乎是把整个API都写在注释里了，希望对新人能有所帮助，在此附上效果图、html和js的代码，以供参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!-- 使用IE8以上的渲染 -->
<!-- <meta name="renderer" content="webkit|ie-comp|ie-stand"> -->
<!-- 三个参数分别代表极速、兼容、标准模式，适用于360浏览器 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>监控管理系统</title>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/jquery.min.js">
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/echarts.js">
</script>  <!--导入的为ECharts3的js --></head>
<body><div style="padding:20px;width:100%;height:100%;"> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 1104px;height:464px;"></div><div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">节点关系提示区</div></div>
</body>
</html>

            // 基于准备好的dom，初始化ECharts实例            var myChart = echarts.init(document.getElementById('main'), 'macarons');            // 指定图表的配置项和数据var option = {tooltip : {show : true,   //默认显示showContent:true, //是否显示提示框浮层trigger:'item',//触发类型，默认数据项触发triggerOn:'click',//提示触发条件，mousemove鼠标移至触发，还有click点击触发alwaysShowContent:false, //默认离开提示框区域隐藏，true为一直显示showDelay:0,//浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。hideDelay:200,//浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。enterable:false,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。position:'right',//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。confine:false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导tooltip 超出外界被截断时，此配置比较有用。transitionDuration:0.4,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。formatter: function (params, ticket, callback) {//判断数据，提供相应的url。var path="";var node=params.data; //当前选中节点数据var category=params.data.category;  //选中节点图例0负载 1中间件 2端口号 3数据库 4用户名 if(category==2){ //为jvm 虚拟机各类参数的路径path = "${ctx}/weblogic.do?host=" + node.host + "&port="+ node.port + "&username=" + node.username+ "&pwd=" + node.pwd; //准备访问路径}else if(category==4){ //为jdbc 数据库的路径path = "${ctx}/oracle.do?host=" + node.host + "&port="+ node.port + "&username=" + node.username+ "&pwd=" + node.pwd + "&instance="+ node.instance; //准备访问路径
                        }console.log(params);$.ajax({async : true,//设置异、同步加载cache : false,//false就不会从浏览器缓存中加载请求信息了type : 'post',dataType : "json",url : path,//请求的action路径  success : function(data) { //请求成功后处理函数。    //加工返回后的数据debugger;if(category==2){ //当选择端口号时var res = 'jvm最大内存值:' + data.memoryMaxSize+'<br/>';res+='jvm空闲内存值:'+data.memoryFreeSize+'<br/>';res+='jvm内存使用率：'+data.memoryPer+'<br/>';res+='空闲线程：'+data.ideThread+'<br/>';res+='总线程：'+data.totalThread+'<br/>';res+='每秒处理的线程数比率：'+data.throuhput+'<br/>';callback(ticket,res);}else if(category==4){//当选择用户名时var res = '当前链接数：'+data.processCount+'<br/>';res+='最大链接数：'+data.maxProcessCount+'<br/>';callback(ticket,res);}},error : function() {//请求失败处理函数  $.messager.alert('警告', '请求失败！', 'warning');}});if(category==2||category==4){ //当选择端口号与用户名时提示加载return "loading";}else{                   //其他情况显示所属图例以及名称return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;}}},legend : { //=========圖表控件show : true,data : [ {name : '负载',icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            },{name : '中间件',icon : 'roundRect'}, {name : '端口号',icon : 'circle'}, {name : '数据库',icon : 'circle'},{name : '用户名',icon : 'roundRect'} ]},series : [ {type : 'graph', //关系图name : "监控管理系统", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。layout : 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les MiserableslegendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。hoverAnimation : true,//是否开启鼠标悬停节点的显示动画coordinateSystem : null,//坐标系可选xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项yAxisIndex : 0, //y轴坐标 force : { //力引导图基本配置//initLayout: ,//力引导的初始化布局，默认使用xy轴的标点repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长layoutAnimation : true//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                    },roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。//symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）  也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿//symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array//symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。//symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']edgeSymbol : [ 'none', 'none' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']edgeSymbolSize : 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。itemStyle : {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。normal : { //默认样式
                            label : {show : true},borderType : 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4borderWidth : 2, //图形的描边线宽。为 0 时无描边。opacity : 1// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
},emphasis : {//高亮状态
}},lineStyle : { //==========关系边的公用线条样式。
                        normal : {color : 'rgba(255,0,255,0.4)',width : '3',type : 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）curveness : 0.3, //线条的曲线程度，从0到1opacity : 1// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                        },emphasis : {//高亮状态
}},label : { //=============图形上的文本标签
                        normal : {show : true,//是否显示标签。position : 'inside',//标签的位置。['50%', '50%'] [x,y]textStyle : { //标签的字体样式color : '#cde6c7', //字体颜色fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...fontFamily : 'sans-serif', //文字的字体系列fontSize : 12, //字体大小
                            }},emphasis : {//高亮状态
}},edgeLabel : {//==============线条的边缘标签
                        normal : {show : false},emphasis : {//高亮状态
}},//别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小//label:标签样式。
                    data : [ {id : 0,category : 0,name : '101.133.8.88',symbol : 'roundRect',value : 20,symbolSize : 80}, {id : 1,category : 1,name : '192.168.8.88',symbol : 'rect',value : 20,symbolSize : 70}, {id : 2,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60,yId:"jvm",host:"192.168.6.37",port:"7001",username:"weblogic",pwd:"weblogic1"}, {id : 3,category : 2,name : '7100',symbol : 'circle',value : 20,symbolSize : 60}, {id : 4,category : 1,name : '102.12.33.23',symbol : 'rect',value : 20,symbolSize : 70}, {id : 5,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60}, {id : 6,category : 2,name : '7100',symbol : 'circle',value : 20,symbolSize : 60}, {id : 7,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60}, {id : 8,category : 1,name : '101.11.66.6',symbol : 'rect',value : 20,symbolSize : 70}, {id : 9,category : 2,name : '7101',symbol : 'circle',value : 20,symbolSize : 60}, {id : 10,category : 2,name : '7101',symbol : 'circle',value : 20,symbolSize : 60}, {id : 11,category : 2,name : '7001',symbol : 'circle',value : 20,symbolSize : 60}, {id : 12,category : 2,name : '7100',symbol : 'circle',value : 20,symbolSize : 60}, {id : 13,category : 3,name : '192.168.44.44',symbol : 'circle',value : 20,symbolSize : 70}, {id : 14,category : 3,name : '192.168.33.33',symbol : 'circle',value : 20,symbolSize : 70}, {id : 15,category : 3,name : '192.168.22.22',symbol : 'circle',value : 20,symbolSize : 70}, {id : 16,category : 4,name : '55555555555',symbol : 'circle',value : 20,symbolSize : 70,yId:"jdbc",port:"1521",host:"192.168.11.11",username:"222222222",pwd:"11111111",instance:"orcl"}],categories : [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
                    {name : '负载',symbol : 'rect',label : { //标签样式
                        }}, {name : '中间件',symbol : 'rect'}, {name : '端口号',symbol : 'roundRect'}, {name : '数据库',symbol : 'roundRect'}, {name : '用户名',symbol : 'roundRect'} ],links : [ //edges是其别名代表节点间的关系数据。
                    {source : 1,target : 0}, {source : 4,target : 0}, {source : 8,target : 0}, {source : 2,target : 1}, {source : 3,target : 1}, {source : 5,target : 4}, {source : 6,target : 4}, {source : 7,target : 4}, {source : 9,target : 8}, {source : 10,target : 8}, {source : 11,target : 8}, {source : 12,target : 8}, {source : 13,target : 6}, {source : 14,target : 6}, {source : 15,target : 2}, {source : 16,target : 15} ]} ]};// 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);/*ECharts3 方法部分 开始*/function appendPath(params){    //拼接节点关系并显示在左下角，var option = myChart.getOption();var series = option.series[params.seriesIndex]; //获取图表var nodesOption = series.data;//获取所有数据var links= series.links;//获取所有连线if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)var id=params.data.id;var categoryName = series.categories[params.data.category].name;//获取当前节点的图例名称var str=categoryName+":"+nodesOption[id].name;var i = 0;var map = {};for( i = 0 ; i < links.length; i++){map[links[i].source] = links[i].target;}while(true){           if(map[id] == undefined){break;}//获取父节点的图例名称并连接str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str; id = map[id] ;}return str;}else if(params.dataType=="edge"){ //当鼠标停留在连线上时，暂不处理return "";}}function openOrFold(params) {  //该事件会提示节点间关系var str = appendPath(params);document.getElementById("main_1").innerHTML = str;return str;}//var ecConfig = echarts.config; echarts2的获取事件方法，当前为echarts3myChart.on('mouseover', openOrFold);//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' /*ECharts3 方法部分 结束*//*ECharts3 结束*/

本文来源:http://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html

vue中引入echarts

npm install echarts -S

或者使用国内的淘宝镜像：

安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

cnpm install echarts -S

全局引入

main.js

// 引入echarts
import echarts from 'echarts'Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted(){this.drawLine();},methods: {drawLine(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: '在Vue中使用echarts' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}}
}

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

按需引入

上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

Hello.vue

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {name: 'hello',data() {return {msg: 'Welcome to Your Vue.js App'}},mounted() {this.drawLine();},methods: {drawLine() {// 基于准备好的dom，初始化echarts实例let myChart = echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: 'ECharts 入门示例' },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}}
}

这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。

vue中使用echarts-gl


npm install echarts-gl

修改hello.vue如下所示:hello.vue

<template><div class="hello"><div id="myChart" :style="{width: '900px', height: '500px'}"></div></div>
</template><script>
import echarts from 'echarts'
require('echarts-gl');export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted() {this.drawLine();},methods: {drawLine() {var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a','10a','11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'];var days = ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'];var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];// 基于准备好的dom，初始化echarts实例let myChart = echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({tooltip: {},visualMap: {max: 20,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']}},xAxis3D: {type: 'category',data: hours},yAxis3D: {type: 'category',data: days},zAxis3D: {type: 'value'},grid3D: {boxWidth: 200,boxDepth: 80,light: {main: {intensity: 1.2},ambient: {intensity: 0.3}}},series: [{type: 'bar3D',data: data.map(function (item) {return {value: [item[1], item[0], item[2]]}}),shading: 'color',label: {show: false,textStyle: {fontSize: 16,borderWidth: 1}},itemStyle: {opacity: 0.4},emphasis: {label: {textStyle: {fontSize: 20,color: '#900'}},itemStyle: {color: '#900'}}}]});}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>