echarts类库markLine.data设置问题 - 开源中国社区
当前访客身份：游客 [
当前位置：
map.markLine().data(" [{name:'厦门'}, {name:'北京',value:95}],");使用这段代码，全台页面接收后没有相应的标线。请问该如何解决。
map.markLine().data(Object...values);
共有0个答案
更多开发者职位上
有什么技术问题吗？
ggg1的其它问题
类似的话题27371人阅读
【JavaScript】（30）
1. eCharts官网&。
& & 这是官网的简介：
& &&ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图等11类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
首先，由于eCharts底层依赖轻量级的Canvas类库，所以我们必须下载ZRender文件，地址：
然后，我们需要下载echarts-2.0.2,这是我们通过eCharts进行前端图表开发所必需的。如下图红框圈起的部分，是我在练习eCharts图表展现所引入的目录:
2. 简单图表的开发
& & 在html页面引入esl.js文件：
&script type=&text/javascript& src=&./js/echarts-2.0.2/src/esl.js&&&/script&
&下面的html代码段是要展示图表的部分：
& & &&div id=&myChart& style=&height: 400 width:800 border: 1px solid # padding: 10&&&/div&
& & 必须设置这个div的高度和宽度来指定图表所展示的大小，不然是看不到图表的。
紧接着，就是最关键的js部分:
&script type=&text/javascript&&
* 按需加载
* 引入echart.js依赖的zrender.js, 再引入echart.js
require.config({
packages: [
name: 'zrender',
location: './js/zrender-2.0.2/src', // zrender与echarts在同一级目录
main: 'zrender'
name: 'echarts',
location: './js/echarts-2.0.2/src',
main: 'echarts'
var option = {
text: '未来一周气温变化',
subtext: '测试数据'
tooltip : {
trigger: 'axis'//item
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',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
type : 'value',
axisLabel : {
formatter: '{value} °C'
splitNumber:10
series : [
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
markLine : {
{type : 'average', name: '平均值'}
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
markLine : {
{type : 'average', name : '平均值'}
'echarts',
'echarts/chart/line',
'echarts/chart/bar'
//渲染ECharts图表
function DrawEChart(ec) {
//图表渲染的容器对象
var chartContainer = document.getElementById(&myChart&);
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption(option);
然后发布应用，输入访问路径，进行访问，效果如下图：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：875380次
积分：9031
积分：9031
排名：第1397名
原创：190篇
转载：49篇
评论：121条
(1)(7)(1)(2)(2)(1)(1)(3)(1)(3)(7)(1)(10)(6)(4)(2)(5)(6)(18)(1)(1)(8)(7)(5)(6)(1)(2)(7)(12)(19)(24)(1)(9)(5)(18)(1)(31)如何在fastunit中使用百度ECharts
ECharts是百度推出的一款非常简单易用，且功能强大的商业级数据图表。下面这篇文章将告诉你，如何在fastunit中使用百度ECharts。步骤如下：
1、这里假设把fastunit放在D盘根目录。在D:\fastunit\domain\app\中创建echartstest目录，并在echartstest下创建echarts.js，内容如下：
require.config({
echarts: '/build/dist'
'echarts',
// 使用柱状图就加载line模块，按需加载
'echarts/chart/line',
// 使用柱状图就加载bar模块，按需加载
'echarts/chart/bar'
function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
text: '未来一周气温变化',
subtext: '纯属虚构'
tooltip: {
trigger: 'axis'
data: ['最高气温', '最低气温']
toolbox: {
show: true,
feature: {
show: true
dataView: {
show: true,
readOnly: false
magicType: {
show: true,
type: ['line', 'bar']
restore: {
show: true
saveAsImage: {
show: true
calculable: true,
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
type: 'value',
axisLabel: {
formatter: '{value} &C'
series: [{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
type: 'max',
name: '最大值'
type: 'min',
name: '最小值'
markLine: {
type: 'average',
name: '平均值'
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
name: '周最低',
value: -2,
标签(Tag):
------分隔线----------------------------
------分隔线----------------------------Echarts-echart和springMVC实现堆栈图
通过工具栏切换成折线图：
1.部署好springMVC工程
2.*****在lib中加入ECharts-2.2.4.jar 地址：http://git.oschina.net/free/ECharts
3.因为要用到fastJson所以还要导入其所需的jar包fastjson-1.2.5-sources.jar 和fastjson-1.2.5.jar
4.springMVC的服务层的代码：EchartsT.java
package com.
import com.github.abel533.echarts.L
import com.github.abel533.echarts.O
import com.github.abel533.echarts.T
import com.github.abel533.echarts.axis.CategoryA
import com.github.abel533.echarts.axis.ValueA
import com.github.abel533.echarts.code.LineT
import com.github.abel533.echarts.code.M
import com.github.abel533.echarts.code.MarkT
import com.github.abel533.echarts.code.O
import com.github.abel533.echarts.code.PointerT
import com.github.abel533.echarts.code.SelectedM
import com.github.abel533.echarts.code.T
import com.github.abel533.echarts.code.T
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.code.Y;
import com.github.abel533.echarts.data.D
import com.github.abel533.echarts.data.PointD
import com.github.abel533.echarts.feature.MagicT
import com.github.abel533.echarts.series.B
import com.github.abel533.echarts.series.F
import com.github.abel533.echarts.series.L
import com.github.abel533.echarts.series.M
import com.github.abel533.echarts.series.MapL
import com.github.abel533.echarts.series.P
import com.github.abel533.echarts.style.ItemS
import com.github.abel533.echarts.style.LineS
* @author lyx
* 下午1,34,50
*.service.EchartsT
public class EchartsT {
public Option stackChart()
Option option = new Option();
option.title(获取信息途径所占比重);
option.tooltip().trigger(Trigger.axis);
option.tooltip().axisPointer().type(PointerType.shadow);
//图例说明
option.legend().data(直接访问,邮件营销,联盟广告,视频广告,搜索引擎,百度,谷歌,必应,其他);
option.toolbox().show(true).orient(Orient.vertical).x(X.right).y(Y.center)
.feature(Tool.mark,Tool.dataView,Tool.dataZoom,new MagicType(Magic.bar,Magic.line,Magic.stack,Magic.tiled),
Tool.restore,Tool.saveAsImage);
//是否启用拖拽重计算特性
option.calculable(true);
//x轴 -类目轴
option.xAxis(new CategoryAxis().data(周一,周二,周三,周四,周五,周六,周日));
//Y轴 -值轴
option.yAxis(new ValueAxis());
//系列 ,其中stack表示堆栈图的设置
Bar bar1 = new Bar(直接访问);
bar1.data(320, 332, 301, 334, 390, 330, 320);
Bar bar2 = new Bar(邮件营销);
bar2.stack(广告);
bar2.data(120, 132, 101, 134, 90, 230, 210);
Bar bar3 = new Bar(联盟广告);
bar3.stack(广告);
bar3.data(220, 182, 191, 234, 290, 330, 310);
Bar bar4 = new Bar(视频广告);
bar4.stack(广告);
bar4.data(150, 232, 201, 154, 190, 330, 410);
Bar bar5 = new Bar(搜索引擎);
bar5.data(862, , , );
bar5.markLine().itemStyle().normal().lineStyle(new LineStyle().type(LineType.dashed));
bar5.markLine().data(new PointData().type(MarkType.min),new PointData().type(MarkType.max));
Bar bar6 = new Bar(百度);
bar6.stack(搜索引擎);
bar6.data(620, 732, 701, 734, , 1120);
Bar bar7 = new Bar(谷歌);
bar7.stack(搜索引擎);
bar7.data(120, 132, 101, 134, 290, 230, 220);
Bar bar8 = new Bar(必应);
bar8.stack(搜索引擎);
bar8.data(60, 72, 71, 74, 190, 130, 110);
Bar bar9 = new Bar(其他);
bar9.stack(搜索引擎);
bar9.data(62, 82, 91, 84, 109, 110, 120);
//添加到系列中
option.series(bar1,bar2,bar3,bar4,bar5,bar6,bar7,bar8,bar9);
5.控制层的代码：echartsContr.java
package com.
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import com.alibaba.fastjson.JSON;
import com.github.abel533.echarts.O
import com.service.EchartsT;
* @author lyx
* 下午1:36:51
*.controller.echartsContr
@Controller
@RequestMapping(/echarts)
public class echartsContr {
EchartsT ech = new EchartsT();
* @param res
@RequestMapping(/stackChart)
public String stackChart(HttpServletRequest res)
Option option = ech.stackChart();
String opt = JSON.toJSONString(option);
res.setAttribute(option, opt);
6. ec.jsp 页面代码：
&%@ page language=java import=java.util.* pageEncoding=UTF-8%&
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
&script type=text/javascript src=../js/jquery-1.11.3.min.js&&/script&
&script type=text/javascript src=../js/echarts.js&&/script&&script type=text/javascript&
//路径配置
require.config({
echarts: '../js'
//获得后台传过来的JSON数据
var opt =${option};
//设置主要样式
[ //需要什么图形就加载什么图形 这里只用到了柱状图，只需加载bar就行
'echarts',
'echarts/chart/bar',//柱状图
'echarts/chart/line', //折线
'echarts/chart/pie', //椭圆
'echarts/chart/map', //地图
'echarts/chart/funnel' //漏斗
function(ec){
//初始化echart对象
var chart =ec.init(document.getElementById('main'));//ec.init( $(#main));
chart.setOption(opt);
7.生成后的页面：
&script type=text/javascript src=../js/jquery-1.11.3.min.js&&/script&
&script type=text/javascript src=../js/echarts.js&&/script&&script type=text/javascript&
//路径配置
require.config({
echarts: '../js'
//获得后台传过来的JSON数据
var opt ={calculable:true,legend:{data:[直接访问,邮件营销,联盟广告,视频广告,搜索引擎,百度,谷歌,必应,其他]},series:[{data:[320,332,301,334,390,330,320],name:直接访问,type:bar},{data:[120,132,101,134,90,230,210],name:邮件营销,stack:广告,type:bar},{data:[220,182,191,234,290,330,310],name:联盟广告,stack:广告,type:bar},{data:[150,232,201,154,190,330,410],name:视频广告,stack:广告,type:bar},{data:[862,6,70],markLine:{data:[{type:min},{type:max}],itemStyle:{normal:{lineStyle:{type:dashed}}}},name:搜索引擎,type:bar},{data:[620,732,701,734,20],name:百度,stack:搜索引擎,type:bar},{data:[120,132,101,134,290,230,220],name:谷歌,stack:搜索引擎,type:bar},{data:[60,72,71,74,190,130,110],name:必应,stack:搜索引擎,type:bar},{data:[62,82,91,84,109,110,120],name:其他,stack:搜索引擎,type:bar}],title:{text:获取信息途径所占比重},toolbox:{feature:{mark:{lineStyle:{color:#1e90ff,type:dashed,width:2},show:true,title:{mark:辅助线开关,markClear:清空辅助线,markUndo:删除辅助线}},dataView:{lang:[数据视图,关闭,刷新],readOnly:false,show:true,title:数据视图},dataZoom:{show:true,title:{dataZoom:区域缩放,dataZoomReset:区域缩放后退}},magicType:{show:true,title:{line:折线图切换,stack:堆积,bar:柱形图切换,tiled:平铺},type:[bar,line,stack,tiled]},restore:{show:true,title:还原},saveAsImage:{lang:[点击保存],show:true,title:保存为图片,type:png}},orient:vertical,show:true,x:right,y:center},tooltip:{axisPointer:{type:shadow},trigger:axis},xAxis:[{data:[周一,周二,周三,周四,周五,周六,周日],type:category}],yAxis:[{type:value}]};
//设置主要样式
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie',
'echarts/chart/map',
'echarts/chart/funnel'
function(ec){
//初始化echart对象
var chart =ec.init(document.getElementById('main'));//ec.init( $(#main));
chart.setOption(opt);
通过上面网站作者所编写的ECharts-2.2.4.jar ,导入到我们工程中这样我们的页面中的js代码，就可以现在项目的后台生成，并通过json转换成字符串传入到页面中，在页面接收传入的json格式的字符串，后就可以生成我们设置的图表了。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'