怎么将echart formatter插入网页设计
点击联系发帖人
时间：2016-05-24 04:04
来自CSDN博客：echarts加载动态数据---实时统计
最后更新时间
blog__126556
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&&jsp:include page=&/WEB-INF/view/common/header.jsp& flush=&true& /&&script type=&text/javascript& charset=&utf-8& src=&/resources/echarts/esl.js&&&/script&&div id=&drawEcharts& style=&height:400&&&/div&
&script type=&text/javascript&&
// 路径配置
require.config({
'echarts' : '/resources/echarts/echarts',
'echarts/chart/bar' : '/resources/echarts/echarts'
'echarts',
'echarts/chart/bar' // 使用折线图就加载bar模块，按需加载
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('drawEcharts'));
var jsonNum=[13,12,12,15,20,18,8];
var jsonTime=[71,71,70.21,94,11,11,42];
var jsonDay=[&1月23日&,&1月24日&,&1月25日&,&1月26日&,&1月27日&,&1月28日&,&1月29日&];
option = {
text: '在线直播人数',
subtext: ''
tooltip : {
trigger: 'axis'
data:['在线人数', '预购队列']
dataZoom : {
show : false,
start : 0,
type : 'category',
boundaryGap : true,
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
type : 'category',
boundaryGap : true,
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
type : 'value',
scale: true,
name : '价格',
boundaryGap: [0.2, 0.2]
type : 'value',
scale: true,
name : '预购量',
boundaryGap: [0.2, 0.2]
series : [
name:'预购队列',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
name:'在线人数',
type:'line',
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
var lastData = 11;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
// 动态数据接口 addData
myChart.addData([
// 系列索引
Math.round(Math.random() * 1000), // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 系列索引
lastData, // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 坐标轴标签
// 为echarts对象加载数据
myChart.setOption(option);
&/script& &script type=&text/javascript&&var timeT&/script&&jsp:include page=&/WEB-INF/view/common/footer.jsp& flush=&true& /&
来自CSDN博客：ECharts整合HT for Web的网络拓扑图应用
最后更新时间
blog__3418159
JavaScript
ht.Chart = function(option){
var self = this,
view = self._view = document.createElement('div');
view.style.position = 'absolute';
view.style.setProperty('box-sizing', 'border-box', null);
self._option = option;};ht.Default.def('ht.Chart', Object, {
ms_fire: 1,
ms_ac: ['chart', 'option', 'isFirst'],
validateImpl: function(){
var self = this,
chart = self._chart;
if(!chart){
chart = self._chart = echarts.init(self.getView());
chart.setOption(self._option);
chart.resize();
关于 echart 温度计 获取点击事件的方法
最后更新时间
echart温度计
function ehcartcountbar(data) { var jidu=[]; var phase=[]; var proid=[]; for(var i=0;i&data.jidu.i++){
jidu.push(data.jidu[i].VALUE);
proid.push(data.jidu[i].PROJ_RIDS);
} for(var i=0;i&data.phase.i++){
phase.push(data.phase[i].VALUE); }
var fristcahrs = echarts.init(document.getElementById('div_jdjzqk_detail')); option = {
text: '',
sublink: ''
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
formatter: function (params){
return params[0].name + '&br/&'
+ params[0].seriesName + ' : ' + params[0].value + '&br/&'
+ params[1].seriesName + ' : ' + (params[1].value + params[0].value);
calculable : true,
type : 'category',
data : ['识别','准备','采购','执行','移交']
type : 'value',
boundaryGap: [0, 0.1]
series : [
name:'完成',
type:'bar',
stack: 'sum',
barCategoryGap: '50%',
itemStyle: {
color: 'tomato',
barBorderColor: 'tomato',
barBorderWidth: 6,
barBorderRadius:0,
show: true, position: 'insideTop'
data:[260, 200, 220, 120, 100, 80]
data:phase
name:'增加',
type:'bar',
stack: 'sum',
itemStyle: {
color: '#fff',
barBorderColor: 'tomato',
barBorderWidth: 6,
barBorderRadius:0,
show: true,
position: 'top',
formatter: function (params) {
for (var i = 0, l = option.xAxis[0].data. i & i++) {
if (option.xAxis[0].data[i] == params.name) {
return option.series[0].data[i] + params.
textStyle: {
color: 'tomato'
data:[40, 80, 50, 80,80, 70]
fristcahrs.setOption(option);
function eConsole(params) {
var name =&&;
name = params.
if(name==&识别&){
if (proid[0]==null) {
selectprojgurid(&&);
var pid0=proid[0];
selectprojgurid(pid0);
if(name==&准备&){
if (proid[1]==null) {
selectprojgurid(&&);
var pid1=proid[1];
selectprojgurid(pid1);
if(name==&采购&){
if (proid[2]==null) {
selectprojgurid(&&);
var pid2=proid[2];
selectprojgurid(pid2);
if(name==&执行&){
if (proid[3]==null) {
selectprojgurid(&&);
var pid3=proid[3];
selectprojgurid(pid3);
if(name==&移交&){
if (proid[4]==null) {
selectprojgurid(&&);
var pids = proid[4];
selectprojgurid(pids);
fristcahrs.on(&click&, eConsole); //解决点击事件的方法
来自CSDN博客：Echarts使用教程--标签式单文件引入
最后更新时间
blog__7134356
&#-- 页头 --&&#assign currNav = &statistics&&&#assign pageTitle=&每分钟最高在线观看人数查询&&&#include &/commons/header.ftl&&
&div class=&container&&
&div class=&row&&
&div class=&col-md-2&&
&#assign sidebarNav = &viewers&&
&#include &/commons/channelSidebar.ftl&&
&div class=&col-md-10&&
&div class=&panel panel-default&&
&div class=&panel-heading&&
&#-- 统一头信息 --&
&#include &/commons/channelPanelHeading.ftl&&
&div class=&panel-body&&
&form id=&dateRangeForm& class=&form-inline well well-sm& method=&get&&
&div class=&form-group&&
&input type=&text& id=¤tDay& name=¤tDay& value=&${currentDay!''}& placeholder=&请选择日期& class=&form-control datepicker&&
&div class=&form-group&&
&input type=&text& id=&sessionId& name=&sessionId& value=&${sessionId!''}& placeholder=&直播场次& class=&form-control&&
&div class=&form-group&&
&input type=&text& id=¶m1& name=¶m1& value=&${param1!''}& placeholder=&自定义参数1& class=&form-control&&
&div class=&form-group&&
&input type=&text& id=¶m2& name=¶m2& value=&${param2!''}& placeholder=&自定义参数2& class=&form-control&&
&button class=&btn btn-primary&&查询&/button&
&div id=&chartDiv& style=&width: 100%; height: 340&&&/div&
&div id=&infodiv& style=&margin-top: 24&&&/div&
&table class=&table table-striped&&
&th&播放ID&/th&
&th&播放时长&/th&
&th&流量&/th&
&th&直播场次&/th&
&th&自定义参数1&/th&
&th&观众IP&/th&
&th&所在省份&/th&
&th&所在城市&/th&
&th&浏览器&/th&
&th&是否为移动端&/th&
&#if paginator.contents?has_content&
&#list paginator.contents as s&
&td&${s.playId}&/td&
&td&${s.playDuration}&/td&
&td&${s.flowSize}&/td&
&td&${s.sessionId!&-&}&/td&
&td&${s.param1!&-&}&/td&
&td&${s.ipAddress}&/td&
&td&${s.province}&/td&
&td&${s.city}&/td&
&td&${s.browser}&/td&
&td&${s.isMobile}&/td&
&#-- 分页链接 --&
&#if (paginator.totalPages & 1) &
&div class=&col-md-8 col-md-offset-4&&
${paginationHtml!&&}
&/div& &!-- /panel-body --&
&/div& &!-- /container --&&#-- 页脚开始 --&&#include &/commons/footerBegin.ftl&&&script type=&text/javascript& src=&/echarts/esl.js&&&/script&&script src=&/echarts/echarts-all.js&&&/script&&script src=&/datepicker/js/bootstrap-datepicker.js&&&/script&&script&
$(function(){
$(&input.datepicker&).datepicker({format: &yyyy-mm-dd&}).on(&changeDate&, function(ev){
$(&input.datepicker&).datepicker(&hide&);
});&/script&&script type=&text/javascript&&
var myChart = echarts.init(document.getElementById('chartDiv'));
var option = {
tooltip : {
trigger: 'axis'
data:['每分钟观看人数']
toolbox: {
show : false,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
dataZoom : {
show : true,
realtime : true,
//orient: 'vertical',
// 'horizontal'
//width: 400,
height: 20,
//backgroundColor: 'rgba(221,160,221,0.5)',
//dataBackgroundColor: 'rgba(138,43,226,0.5)',
//fillerColor: 'rgba(38,143,26,0.6)',
//handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start : 40,
type : 'category',
name:'(时间/分钟)',
boundaryGap : false,
data : function (){
var list = [];
var n = 0;
while (n++ & 150) {
list.push(n);
name:'(观看人数/人)',
type : 'value'
series : [
name:'每分钟观看人数',
type:'line',
data:function (){
var list = [];
for (var i = 1; i &= 150; i++) {
list.push(Math.round(Math.random()* 30));
calculable:false
// 为echarts对象加载数据
myChart.setOption(option);
&/script& &#-- 页脚结束 --&&#include &/commons/footerEnd.ftl&&
echart散点图片段柱状图代码
最后更新时间
snippet_file_0.txt
//散点图option = {
tooltip : {
trigger: 'item'
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
dataRange: {
y: 'center',
text:['高','低'],
// 文本，默认为数值文本
color:['lightgreen','yellow'],
calculable : true
type : 'value',
scale : true
type : 'value',
position:'right',
scale : true
animation: false,
series : [
name:'scatter1',
type:'scatter',
symbolSize:5,
data: (function () {
var d = [];
var len = 500;
while (len--) {
value = (Math.random()*100).toFixed(2) - 0;
(Math.random()*value + value).toFixed(2) - 0,
(Math.random()*value).toFixed(2) - 0,
]};//柱状图option = {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
tooltip : {
trigger: 'axis'
data:['蒸发量','降水量']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
calculable : true,
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
type : 'value'
series : [
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
markLine : {
{type : 'average', name: '平均值'}
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
markLine : {
{type : 'average', name : '平均值'}
来自CSDN博客：echart图表的各种参数介绍
最后更新时间
blog__8306840
转载：http://blog.csdn.net/zou128865/article/details/
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&
String path = request.getContextPath();
String basePath = request.getScheme()+&://&+request.getServerName()+&:&+request.getServerPort()+path+&/&;
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&
&base href=&&%=basePath%&&&
&title&ECharts实例&/title&
&!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--&
&!--Step:1 为ECharts准备一个具备大小（宽高）的Dom--&
&div id=&mainBar& style=&height:500border:1px solid #padding:10&&&/div&
&!--Step:2 Import echarts.js--&
&!--Step:2 引入echarts.js--&
&script src=&js/echarts.js&&&/script&
&script type=&text/javascript&&
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
echarts: './js'
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
//这里的'echarts'相当于'./js'
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
//创建ECharts图表方法
function (ec) {
//--- 折柱 ---
//基于准备好的dom,初始化echart图表
var myChart = ec.init(document.getElementById('mainBar'));
//定义图表option
var option = {
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
//主标题文本，'\n'指定换行
text: '2013年广州降水量与蒸发量统计报表',
//主标题文本超链接
link: '.cn/weatherLive/climateForecast//157.html',
//副标题文本，'\n'指定换行
subtext: '',
//副标题文本超链接
sublink: '/myblog/?Echarts',
//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top'
//提示框，鼠标悬浮交互时的信息提示
tooltip: {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'axis'
//图例，每个图表最多仅有一个图例
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
data: ['蒸发量','降水量']
//工具箱，每个图表最多仅有一个工具箱
toolbox: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
show: true,
//启用功能，目前支持feature，工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: {show: true},
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
dataZoom: {
show: true,
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: {show: true, type: ['line', 'bar']},
//restore，还原，复位原始图表
restore: {show: true},
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
saveAsImage: {show: true}
//是否启用拖拽重计算特性，默认关闭(即值为false)
calculable: true,
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，横轴默认为类目型'category'
type: 'category',
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
//纵轴通常为数值型，但条形图时则纵轴为类目型
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，纵轴默认为数值型'value'
type: 'value',
//分隔区域，默认不显示
splitArea: {show: true}
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '蒸发量',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//系列中的数据标注内容
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
//系列中的数据标线内容
markLine: {
{type: 'average', name: '平均值'}
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '降水量',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//系列中的数据标注内容
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
//系列中的数据标线内容
markLine: {
{type: 'average', name: '平均值'}
//为echarts对象加载数据
myChart.setOption(option);
来自CSDN博客：EChart报表插件使用笔记（1）
最后更新时间
blog__7107766
package com.spring.controller;import java.io.IOException;import java.util.Arrays;import java.util.Date;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.servlet.ModelAndView;@Controllerpublic class EchartController {
* 静态的Echart报表页面
*/ @RequestMapping(value=&user/echart&, method = {RequestMethod.POST,RequestMethod.GET}) public ModelAndView PostJsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{
ModelAndView mav=new ModelAndView();
mav.addObject(&time&, new Date());
mav.setViewName(&echart/echart&);
return mav; }
* 动态的Echart报表页面
*/ @RequestMapping(value=&user/echart2&, method = {RequestMethod.POST,RequestMethod.GET}) public ModelAndView dynamicEchart(HttpServletRequest request,HttpServletResponse response) throws IOException{
ModelAndView mav=new ModelAndView();
String str[]={&衬衫2&,&羊毛衫2&,&雪纺衫2&,&裤子2&,&高跟鞋2&,&袜子2&,&nickname&};
float bar[]={15, 28, 41, 45, 56, 120, 89};
List&String& category=Arrays.asList(str);//将数组转换成为list
mav.addObject(&time&, new Date());
mav.addObject(&listData&, category);//list
mav.addObject(&array&, str);//数组
mav.addObject(&jsonArray&, JSONArray.fromObject(str));//转换为json数组
mav.addObject(&jsonList&, JSONArray.fromObject(category));//转换为json数组
mav.addObject(&jsonInt&, JSONArray.fromObject(bar));//转换为json数组
mav.setViewName(&echart/dynamicEchart&);
return mav; }
来自CSDN博客：Echarts使用教程——模块化单文件引入（推荐）
最后更新时间
blog__1615312
&!DOCTYPE html&&head&
&meta charset=&utf-8&&
&title&ECharts&/title&&/head&&body&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main& style=&height:400px&&&/div&&/body&1202人阅读
// 路径配置
require.config({
echarts : 'jquery/echarts-2.2.7/build/dist'
// 使用EChart.js画图
function drawChart() {
require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('myChart'));
// 添加点击事件
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
var option = {
tooltip : {
show : false,
trigger : 'item',
formatter : '{a} : {b}'
toolbox : {
show : true,
feature : {
restore : {
show : true
series : [ {
type : 'force',
name : &关系&,
ribbonType : false,
clickable : true,
draggable : false,
categories : [ {
name : '属性'
name : '实例'
itemStyle : {
normal : {
show : true,
textStyle : {
color : '#333'
nodeStyle : {
brushType : 'both',
borderColor : 'rgba(255,215,0,0.4)',
borderWidth : 1
linkStyle : {
type : 'curve'
emphasis : {
show : false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
nodeStyle : {
linkStyle : {}
useWorker : false,
minRadius : 15,
maxRadius : 25,
gravity : 1.1,
scaling : 1.1,
roam : false,
nodes : [ {
category : 1,
name : '实例',
value : 10,
label : '宝马',
category : 0,
name : '属性1',
value : 6,
label : '宝马X1'
category : 0,
name : '属性2',
value : 6,
label : '宝马X5'
category : 0,
name : '属性3',
value : 6,
label : '宝马3系'
category : 0,
name : '属性4',
value : 6,
label : '宝马7系'
category : 0,
name : '属性5',
value : 6,
label : '宝马X6'
category : 0,
name : '属性6',
value : 6,
label : '宝马1系'
category : 0,
name : '属性7',
value : 6,
label : '宝马i8'
links : [ {
source : '属性1',
target : '实例',
weight : 1,
name : '属性1'
source : '属性2',
target : '实例',
weight : 1,
name : '属性2'
source : '属性3',
target : '实例',
weight : 1,
name : '属性3'
source : '属性4',
target : '实例',
weight : 1,
name : '属性4'
source : '属性5',
target : '实例',
weight : 1,
name : '属性5'
source : '属性6',
target : '实例',
weight : 1,
name : '属性6'
source : '属性7',
target : '实例',
weight : 1,
name : '属性7'
// 为echarts对象加载数据
myChart.setOption(option);
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
if (param.type == 'click') {
alert(param.name);
在html中建一个空的div，id是myChart，onclick事件是drawChart()，即可运行得到结果。
实现节点可点击，重点在于三行代码，如下：
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
clickable : true,
重要的事情说三遍：&div id=&myChart& class=&myChart&&&/div&一定要设置宽和高、一定要设置宽和高、一定要设置宽和高！！！
刚刚因为忘记给myChart设置宽，导致图无法显示，找了一天才找到原因！！！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：11733次
排名：千里之外
(2)(2)(1)(1)(1)}
最后更新时间
blog__126556
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&&jsp:include page=&/WEB-INF/view/common/header.jsp& flush=&true& /&&script type=&text/javascript& charset=&utf-8& src=&/resources/echarts/esl.js&&&/script&&div id=&drawEcharts& style=&height:400&&&/div&
&script type=&text/javascript&&
// 路径配置
require.config({
'echarts' : '/resources/echarts/echarts',
'echarts/chart/bar' : '/resources/echarts/echarts'
'echarts',
'echarts/chart/bar' // 使用折线图就加载bar模块，按需加载
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('drawEcharts'));
var jsonNum=[13,12,12,15,20,18,8];
var jsonTime=[71,71,70.21,94,11,11,42];
var jsonDay=[&1月23日&,&1月24日&,&1月25日&,&1月26日&,&1月27日&,&1月28日&,&1月29日&];
option = {
text: '在线直播人数',
subtext: ''
tooltip : {
trigger: 'axis'
data:['在线人数', '预购队列']
dataZoom : {
show : false,
start : 0,
type : 'category',
boundaryGap : true,
data : (function (){
var now = new Date();
var res = [];
var len = 10;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
type : 'category',
boundaryGap : true,
data : (function (){
var res = [];
var len = 10;
while (len--) {
res.push(len + 1);
type : 'value',
scale: true,
name : '价格',
boundaryGap: [0.2, 0.2]
type : 'value',
scale: true,
name : '预购量',
boundaryGap: [0.2, 0.2]
series : [
name:'预购队列',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push(Math.round(Math.random() * 1000));
name:'在线人数',
type:'line',
data:(function (){
var res = [];
var len = 10;
while (len--) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
var lastData = 11;
clearInterval(timeTicket);
timeTicket = setInterval(function (){
lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
lastData = lastData.toFixed(1) - 0;
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
// 动态数据接口 addData
myChart.addData([
// 系列索引
Math.round(Math.random() * 1000), // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 系列索引
lastData, // 新增数据
// 新增数据是否从队列头部插入
// 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// 坐标轴标签
// 为echarts对象加载数据
myChart.setOption(option);
&/script& &script type=&text/javascript&&var timeT&/script&&jsp:include page=&/WEB-INF/view/common/footer.jsp& flush=&true& /&
来自CSDN博客：ECharts整合HT for Web的网络拓扑图应用
最后更新时间
blog__3418159
JavaScript
ht.Chart = function(option){
var self = this,
view = self._view = document.createElement('div');
view.style.position = 'absolute';
view.style.setProperty('box-sizing', 'border-box', null);
self._option = option;};ht.Default.def('ht.Chart', Object, {
ms_fire: 1,
ms_ac: ['chart', 'option', 'isFirst'],
validateImpl: function(){
var self = this,
chart = self._chart;
if(!chart){
chart = self._chart = echarts.init(self.getView());
chart.setOption(self._option);
chart.resize();
关于 echart 温度计 获取点击事件的方法
最后更新时间
echart温度计
function ehcartcountbar(data) { var jidu=[]; var phase=[]; var proid=[]; for(var i=0;i&data.jidu.i++){
jidu.push(data.jidu[i].VALUE);
proid.push(data.jidu[i].PROJ_RIDS);
} for(var i=0;i&data.phase.i++){
phase.push(data.phase[i].VALUE); }
var fristcahrs = echarts.init(document.getElementById('div_jdjzqk_detail')); option = {
text: '',
sublink: ''
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
formatter: function (params){
return params[0].name + '&br/&'
+ params[0].seriesName + ' : ' + params[0].value + '&br/&'
+ params[1].seriesName + ' : ' + (params[1].value + params[0].value);
calculable : true,
type : 'category',
data : ['识别','准备','采购','执行','移交']
type : 'value',
boundaryGap: [0, 0.1]
series : [
name:'完成',
type:'bar',
stack: 'sum',
barCategoryGap: '50%',
itemStyle: {
color: 'tomato',
barBorderColor: 'tomato',
barBorderWidth: 6,
barBorderRadius:0,
show: true, position: 'insideTop'
data:[260, 200, 220, 120, 100, 80]
data:phase
name:'增加',
type:'bar',
stack: 'sum',
itemStyle: {
color: '#fff',
barBorderColor: 'tomato',
barBorderWidth: 6,
barBorderRadius:0,
show: true,
position: 'top',
formatter: function (params) {
for (var i = 0, l = option.xAxis[0].data. i & i++) {
if (option.xAxis[0].data[i] == params.name) {
return option.series[0].data[i] + params.
textStyle: {
color: 'tomato'
data:[40, 80, 50, 80,80, 70]
fristcahrs.setOption(option);
function eConsole(params) {
var name =&&;
name = params.
if(name==&识别&){
if (proid[0]==null) {
selectprojgurid(&&);
var pid0=proid[0];
selectprojgurid(pid0);
if(name==&准备&){
if (proid[1]==null) {
selectprojgurid(&&);
var pid1=proid[1];
selectprojgurid(pid1);
if(name==&采购&){
if (proid[2]==null) {
selectprojgurid(&&);
var pid2=proid[2];
selectprojgurid(pid2);
if(name==&执行&){
if (proid[3]==null) {
selectprojgurid(&&);
var pid3=proid[3];
selectprojgurid(pid3);
if(name==&移交&){
if (proid[4]==null) {
selectprojgurid(&&);
var pids = proid[4];
selectprojgurid(pids);
fristcahrs.on(&click&, eConsole); //解决点击事件的方法
来自CSDN博客：Echarts使用教程--标签式单文件引入
最后更新时间
blog__7134356
&#-- 页头 --&&#assign currNav = &statistics&&&#assign pageTitle=&每分钟最高在线观看人数查询&&&#include &/commons/header.ftl&&
&div class=&container&&
&div class=&row&&
&div class=&col-md-2&&
&#assign sidebarNav = &viewers&&
&#include &/commons/channelSidebar.ftl&&
&div class=&col-md-10&&
&div class=&panel panel-default&&
&div class=&panel-heading&&
&#-- 统一头信息 --&
&#include &/commons/channelPanelHeading.ftl&&
&div class=&panel-body&&
&form id=&dateRangeForm& class=&form-inline well well-sm& method=&get&&
&div class=&form-group&&
&input type=&text& id=¤tDay& name=¤tDay& value=&${currentDay!''}& placeholder=&请选择日期& class=&form-control datepicker&&
&div class=&form-group&&
&input type=&text& id=&sessionId& name=&sessionId& value=&${sessionId!''}& placeholder=&直播场次& class=&form-control&&
&div class=&form-group&&
&input type=&text& id=¶m1& name=¶m1& value=&${param1!''}& placeholder=&自定义参数1& class=&form-control&&
&div class=&form-group&&
&input type=&text& id=¶m2& name=¶m2& value=&${param2!''}& placeholder=&自定义参数2& class=&form-control&&
&button class=&btn btn-primary&&查询&/button&
&div id=&chartDiv& style=&width: 100%; height: 340&&&/div&
&div id=&infodiv& style=&margin-top: 24&&&/div&
&table class=&table table-striped&&
&th&播放ID&/th&
&th&播放时长&/th&
&th&流量&/th&
&th&直播场次&/th&
&th&自定义参数1&/th&
&th&观众IP&/th&
&th&所在省份&/th&
&th&所在城市&/th&
&th&浏览器&/th&
&th&是否为移动端&/th&
&#if paginator.contents?has_content&
&#list paginator.contents as s&
&td&${s.playId}&/td&
&td&${s.playDuration}&/td&
&td&${s.flowSize}&/td&
&td&${s.sessionId!&-&}&/td&
&td&${s.param1!&-&}&/td&
&td&${s.ipAddress}&/td&
&td&${s.province}&/td&
&td&${s.city}&/td&
&td&${s.browser}&/td&
&td&${s.isMobile}&/td&
&#-- 分页链接 --&
&#if (paginator.totalPages & 1) &
&div class=&col-md-8 col-md-offset-4&&
${paginationHtml!&&}
&/div& &!-- /panel-body --&
&/div& &!-- /container --&&#-- 页脚开始 --&&#include &/commons/footerBegin.ftl&&&script type=&text/javascript& src=&/echarts/esl.js&&&/script&&script src=&/echarts/echarts-all.js&&&/script&&script src=&/datepicker/js/bootstrap-datepicker.js&&&/script&&script&
$(function(){
$(&input.datepicker&).datepicker({format: &yyyy-mm-dd&}).on(&changeDate&, function(ev){
$(&input.datepicker&).datepicker(&hide&);
});&/script&&script type=&text/javascript&&
var myChart = echarts.init(document.getElementById('chartDiv'));
var option = {
tooltip : {
trigger: 'axis'
data:['每分钟观看人数']
toolbox: {
show : false,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
dataZoom : {
show : true,
realtime : true,
//orient: 'vertical',
// 'horizontal'
//width: 400,
height: 20,
//backgroundColor: 'rgba(221,160,221,0.5)',
//dataBackgroundColor: 'rgba(138,43,226,0.5)',
//fillerColor: 'rgba(38,143,26,0.6)',
//handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start : 40,
type : 'category',
name:'(时间/分钟)',
boundaryGap : false,
data : function (){
var list = [];
var n = 0;
while (n++ & 150) {
list.push(n);
name:'(观看人数/人)',
type : 'value'
series : [
name:'每分钟观看人数',
type:'line',
data:function (){
var list = [];
for (var i = 1; i &= 150; i++) {
list.push(Math.round(Math.random()* 30));
calculable:false
// 为echarts对象加载数据
myChart.setOption(option);
&/script& &#-- 页脚结束 --&&#include &/commons/footerEnd.ftl&&
echart散点图片段柱状图代码
最后更新时间
snippet_file_0.txt
//散点图option = {
tooltip : {
trigger: 'item'
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
dataRange: {
y: 'center',
text:['高','低'],
// 文本，默认为数值文本
color:['lightgreen','yellow'],
calculable : true
type : 'value',
scale : true
type : 'value',
position:'right',
scale : true
animation: false,
series : [
name:'scatter1',
type:'scatter',
symbolSize:5,
data: (function () {
var d = [];
var len = 500;
while (len--) {
value = (Math.random()*100).toFixed(2) - 0;
(Math.random()*value + value).toFixed(2) - 0,
(Math.random()*value).toFixed(2) - 0,
]};//柱状图option = {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
tooltip : {
trigger: 'axis'
data:['蒸发量','降水量']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
calculable : true,
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
type : 'value'
series : [
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
markLine : {
{type : 'average', name: '平均值'}
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
markLine : {
{type : 'average', name : '平均值'}
来自CSDN博客：echart图表的各种参数介绍
最后更新时间
blog__8306840
转载：http://blog.csdn.net/zou128865/article/details/
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%&
String path = request.getContextPath();
String basePath = request.getScheme()+&://&+request.getServerName()+&:&+request.getServerPort()+path+&/&;
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&
&base href=&&%=basePath%&&&
&title&ECharts实例&/title&
&!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--&
&!--Step:1 为ECharts准备一个具备大小（宽高）的Dom--&
&div id=&mainBar& style=&height:500border:1px solid #padding:10&&&/div&
&!--Step:2 Import echarts.js--&
&!--Step:2 引入echarts.js--&
&script src=&js/echarts.js&&&/script&
&script type=&text/javascript&&
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
echarts: './js'
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
//这里的'echarts'相当于'./js'
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
//创建ECharts图表方法
function (ec) {
//--- 折柱 ---
//基于准备好的dom,初始化echart图表
var myChart = ec.init(document.getElementById('mainBar'));
//定义图表option
var option = {
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
//主标题文本，'\n'指定换行
text: '2013年广州降水量与蒸发量统计报表',
//主标题文本超链接
link: '.cn/weatherLive/climateForecast//157.html',
//副标题文本，'\n'指定换行
subtext: '',
//副标题文本超链接
sublink: '/myblog/?Echarts',
//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top'
//提示框，鼠标悬浮交互时的信息提示
tooltip: {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'axis'
//图例，每个图表最多仅有一个图例
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
data: ['蒸发量','降水量']
//工具箱，每个图表最多仅有一个工具箱
toolbox: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
show: true,
//启用功能，目前支持feature，工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: {show: true},
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
dataZoom: {
show: true,
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: {show: true, type: ['line', 'bar']},
//restore，还原，复位原始图表
restore: {show: true},
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
saveAsImage: {show: true}
//是否启用拖拽重计算特性，默认关闭(即值为false)
calculable: true,
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，横轴默认为类目型'category'
type: 'category',
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
//纵轴通常为数值型，但条形图时则纵轴为类目型
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
show: true,
//坐标轴类型，纵轴默认为数值型'value'
type: 'value',
//分隔区域，默认不显示
splitArea: {show: true}
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '蒸发量',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//系列中的数据标注内容
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
//系列中的数据标线内容
markLine: {
{type: 'average', name: '平均值'}
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '降水量',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//系列中的数据标注内容
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
//系列中的数据标线内容
markLine: {
{type: 'average', name: '平均值'}
//为echarts对象加载数据
myChart.setOption(option);
来自CSDN博客：EChart报表插件使用笔记（1）
最后更新时间
blog__7107766
package com.spring.controller;import java.io.IOException;import java.util.Arrays;import java.util.Date;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.servlet.ModelAndView;@Controllerpublic class EchartController {
* 静态的Echart报表页面
*/ @RequestMapping(value=&user/echart&, method = {RequestMethod.POST,RequestMethod.GET}) public ModelAndView PostJsonTest(HttpServletRequest request,HttpServletResponse response) throws IOException{
ModelAndView mav=new ModelAndView();
mav.addObject(&time&, new Date());
mav.setViewName(&echart/echart&);
return mav; }
* 动态的Echart报表页面
*/ @RequestMapping(value=&user/echart2&, method = {RequestMethod.POST,RequestMethod.GET}) public ModelAndView dynamicEchart(HttpServletRequest request,HttpServletResponse response) throws IOException{
ModelAndView mav=new ModelAndView();
String str[]={&衬衫2&,&羊毛衫2&,&雪纺衫2&,&裤子2&,&高跟鞋2&,&袜子2&,&nickname&};
float bar[]={15, 28, 41, 45, 56, 120, 89};
List&String& category=Arrays.asList(str);//将数组转换成为list
mav.addObject(&time&, new Date());
mav.addObject(&listData&, category);//list
mav.addObject(&array&, str);//数组
mav.addObject(&jsonArray&, JSONArray.fromObject(str));//转换为json数组
mav.addObject(&jsonList&, JSONArray.fromObject(category));//转换为json数组
mav.addObject(&jsonInt&, JSONArray.fromObject(bar));//转换为json数组
mav.setViewName(&echart/dynamicEchart&);
return mav; }
来自CSDN博客：Echarts使用教程——模块化单文件引入（推荐）
最后更新时间
blog__1615312
&!DOCTYPE html&&head&
&meta charset=&utf-8&&
&title&ECharts&/title&&/head&&body&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main& style=&height:400px&&&/div&&/body&1202人阅读
// 路径配置
require.config({
echarts : 'jquery/echarts-2.2.7/build/dist'
// 使用EChart.js画图
function drawChart() {
require([ 'echarts', 'echarts/chart/force' // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('myChart'));
// 添加点击事件
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
var option = {
tooltip : {
show : false,
trigger : 'item',
formatter : '{a} : {b}'
toolbox : {
show : true,
feature : {
restore : {
show : true
series : [ {
type : 'force',
name : &关系&,
ribbonType : false,
clickable : true,
draggable : false,
categories : [ {
name : '属性'
name : '实例'
itemStyle : {
normal : {
show : true,
textStyle : {
color : '#333'
nodeStyle : {
brushType : 'both',
borderColor : 'rgba(255,215,0,0.4)',
borderWidth : 1
linkStyle : {
type : 'curve'
emphasis : {
show : false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
nodeStyle : {
linkStyle : {}
useWorker : false,
minRadius : 15,
maxRadius : 25,
gravity : 1.1,
scaling : 1.1,
roam : false,
nodes : [ {
category : 1,
name : '实例',
value : 10,
label : '宝马',
category : 0,
name : '属性1',
value : 6,
label : '宝马X1'
category : 0,
name : '属性2',
value : 6,
label : '宝马X5'
category : 0,
name : '属性3',
value : 6,
label : '宝马3系'
category : 0,
name : '属性4',
value : 6,
label : '宝马7系'
category : 0,
name : '属性5',
value : 6,
label : '宝马X6'
category : 0,
name : '属性6',
value : 6,
label : '宝马1系'
category : 0,
name : '属性7',
value : 6,
label : '宝马i8'
links : [ {
source : '属性1',
target : '实例',
weight : 1,
name : '属性1'
source : '属性2',
target : '实例',
weight : 1,
name : '属性2'
source : '属性3',
target : '实例',
weight : 1,
name : '属性3'
source : '属性4',
target : '实例',
weight : 1,
name : '属性4'
source : '属性5',
target : '实例',
weight : 1,
name : '属性5'
source : '属性6',
target : '实例',
weight : 1,
name : '属性6'
source : '属性7',
target : '实例',
weight : 1,
name : '属性7'
// 为echarts对象加载数据
myChart.setOption(option);
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
if (param.type == 'click') {
alert(param.name);
在html中建一个空的div，id是myChart，onclick事件是drawChart()，即可运行得到结果。
实现节点可点击，重点在于三行代码，如下：
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
clickable : true,
重要的事情说三遍：&div id=&myChart& class=&myChart&&&/div&一定要设置宽和高、一定要设置宽和高、一定要设置宽和高！！！
刚刚因为忘记给myChart设置宽，导致图无法显示，找了一天才找到原因！！！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：11733次
排名：千里之外
(2)(2)(1)(1)(1)}
我要回帖
更多关于 echart怎么使用 的文章
更多推荐
- ·这个卦怎么解？震为雷卦是吉兆吗吗？
- ·中国力量的含义是什么组合简介
- ·火影之美女如云小说目录
- ·羽毛球精美图片壁纸壁纸，运动风来袭🏸🔥
- ·红色革命电影地道战在线观看有哪些影片
- ·一人说老外汉语听力 节目另一人翻译起个节目名
- ·人体腋下体温多少正常的正常体温是多少
- ·简述幼儿教师教研指导应该如何指导幼儿游戏
- ·简述城市五线及其含义蜡烛图的基本含义
- ·高中政治课题研究题目题目。。求解
- ·小明练习用温度计的初练是规划练习几天的？
- ·470分能上一个470能上什么大学学
- ·厂房地坪漆二层楼板与地坪一次成型施工工艺
- ·c盘里的tempWindows-temp里面出现了一堆前面一堆数字＋Iefile的文件，我用360扫描了
- ·目前国内有哪些做vr虚拟现实概念股的优秀的团队？都有什么作品
- ·请问。一个宽带路由器账号。一个猫一个路由器？？隔壁的想和我家连宽带路由器。。该怎么用啊。。
- ·帮我添加艾华集团 艾立华 艾亮的微信
- ·前端工程 webp图片怎么打开acg-config是干吗的
- ·被误会的男人会怕女人误会吗在哪里可以下载
- ·英文版进口rcd510说明书怎么调音效
- ·怎么将echart formatter插入网页设计
- ·线上我线上的老婆不可能能是女生怎么有ntr标签
- ·dvx602的处理器双vga画面处理器在哪调
- ·QQ发过来的qq购物号名片设置链接链接,怎么切换账号
- ·求张杰我想百度云老婆百度云下载
- ·coreldraw x7怎么破解 coreldraw x7破解补丁方法流程
- ·苹果召回的macbook 显卡门 召回Pro维修扩展计划需要先预约天才吧么
- ·osa欧莎 权力的游戏是什么字体 英文是什么字体 急急急！在线等
- ·怎么查询电信手机的电信号码通话清单查询
- ·中国移动有哪些套餐etoe基本套餐怎么办理
- ·想入手一台wacom新帝系列移动电脑2代，什么时候买最合适？
- ·410千w空调主机要sl410k支持多大内存铝排
- ·企业老去想水电气是否关好数据怎样去分析
- ·明由无线餐饮 wifi 路由器wifi怎么用啊？
- ·电脑老是黑屏怎么回事开不了机 老是这样 然后黑屏
- ·店宝宝软件店铺装修效果图软件如何
