15:26 提问
关于百度Echart动态图表的问题
怎样利用百度Echart实现动态图表，麻烦有做过的大神们指点一二
按赞数排序
给你我的代码示例吧、
var queryDiskBuy=function(){
var ajaxSettings=$.extend({},commonSettings,{
url : params.queryDiskBuyUrl,
success : function(data){
diskBuyHandler(data);
error : errorHandler,
recent : recent,
$.ajax(ajaxSettings);
var diskBuyHandler=function(data){
if(!data.success||data.list==null){
tab("security-tab1-main",dataAllIn,"买入时股票涨幅（%）","当天收盘涨幅（%）",'买入分布');
for(var i=0;i&data.list.i++){
var temp=[data.list[i].matchInAscend,data.list[i].stockAscend,data.list[i].matchInAmt];
dataAllIn[i]=
tab("security-tab1-main",dataAllIn,"买入时股票涨幅（%）","当天收盘涨幅（%）",'买入分布');
var tab = function(id,dataAll,xName,yName,title2){
var myChart = echarts.init(document.getElementById(id));
var markLineOpt = {
animation: false,
formatter: '',
textStyle: {
align: 'right'
lineStyle: {
type: 'solid',
color:"#ccc"
tooltip: {
show:false
coord: [-10,-10],
symbol: 'none'
coord: [10, 10],
symbol: 'none'
var option = {
'rgba(251,75,75,1)','blue'
width: '70%',
height: '70%'
tooltip: {
formatter: function (obj) {
var value = obj.
return '&div style=" font-size: 14px"&'
+ '买入时股票涨幅'+ ':' + value[0] + '%'+ '&br&'
+ '当天收盘涨幅'+ ':' + value[1]+ '%'+ '&br&'
+ '成交金额' + ':' + value[2]+ '元'+ '&br&';
+ '&/div&'+ '&br&'
name:xName,
type : 'value',
nameLocation:"middle",
nameGap:"30",
scale:true,
min:'-10',
splitNumber:10,//设置x轴间隔数
axisLine:{
onZero:false,//坐标轴不从0开始
lineStyle:{
color:"#9DA1A7"
axisTick:{
show:false
name:yName,
nameLocation:"middle",
nameGap:"30",
type : 'value',
scale:true,
min:'-10',
splitNumber:10,//设置y轴间隔数
axisLine:{
onZero:false, //坐标轴不从0开始
lineStyle:{
color:"#9DA1A7"
axisTick:{
show:false
name: '买入分布',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: dataAll,
markLine: markLineOpt,
itemStyle:{
color:function(data){
if(parseFloat(data.data[0]) &parseFloat( data.data[1]))
if("买入分布"==title2){
return "red";
return "green";
if("卖出分布"==title2){
return "red";
return "green";
symbolSize: function (data) {
return Math.abs(data[2]) /1000;
}//节点大小范围
myChart.setOption(option);
不知道你要怎么动态，我的项目做的是超级动态。
1.echars3.0中不同图像只有option不同，所以配置从option入手
2.每个echarts都需要用一个div或者其他元素承载，所以要生成一个多图的页面，一定要为option做唯一标识处理
3.尽量做到模板化
比如我的折线和柱状图模板如下：
color: [#default_static_color],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
data:[#default_static_legend]
type : 'category',
data : [#default_static_xAxis],
axisTick: {
alignWithLabel: true
yAxis : [{type : 'value'}],
series : [#default_static_series]
这里只对option做了处理，
然后配置的时候会根据模板生成进一步的freemarker模板。
还有很多其他模板。
希望可以帮到你....
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐echarts 大小调整_中华文本库
Echarts常用参数速查手册 -By JackSpring 0, 全局变量设置 color:[array] //...{...}],依次为横轴,纵轴,大小 4, 当为K线图时,value值为数组,[{value:[...
1、下载做图表时,用到的类库; 2、采用标签引入的方式(** 只需要引入 echarts-all.js 文件即可); 3、在截取节点的时候,不能使用 JQ 类库,必须使用原生的 ...
-- 为 ECharts 准备一个具备大小(宽高)的 Dom --&
var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 ...
具备大小(宽高)的 Dom(当然可以是动态生成的) 为模块加载器配置 echarts 的...可设置更多属性 o 可传入 lineStyle(详见 lineStyle)控制线条样式 {Object} featur...
var myChart = echarts.init(document.getElementById('main')); var option = { ... } myChart.setOption(option);
注: 标签式引入环境中, 常用模...
--(1)为 ECharts 准备一个具备大小(宽高)的 Dom 标签容器 --&
1 杨教授...相关的图表模块,然后在回调函数中开始使用目标图 表模块(为图表设置相关的参数和...
iOS - ECharts 使用(折线图, 柱状图)_计算机软件及应用_IT/计算机_专业资料。...// 坐标点大小 series1.symbolSize = @(1.5); // 坐标点样式, 设置连线的...
ECharts 与 Highcharts 图表比较 [摘要]: 用过 Highchars 图表组件的朋友应该都知道其可配置性强的确是一个很强的竞争砝码, 但是图表与用户的交互性还是有所...
具有良好的兼容性;ECharts 提供了包括地图在内的多种图表样式, 设置灵活,使用...展现各部门对销售贡献大小,便于企业进行资源分配;综合部门销售比重与增长情况,可作...
新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。 2. 3. 4. 5. 新建标签引入模块化单文件echarts.js。新建标签中为模块加载器配置echarts...最近我一直在做数据可视化的前端工作，我用的最多的绘图工具是d3。d3有点像photoshop，功能很强大，例子也很多，但是学习成本也不低，做项目是需要较大人力投入的。3月底由在亚马逊工作的同学介绍下使用了一下echart，一个由百度前端发起的canvas国产类库（官网：）。这个echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游，全中文文档非常过瘾。跟同样是国产的前端脚手架fis一样（官网），都是诚意满满的国产套餐，体现了现今国内不俗的前端开发实力。使用它们的感觉就像想自己做个平板电脑，去华强北一转，主板、CPU、屏幕等各种套餐一订购，东西就哗哗地组装起来了。极其高效，非常适合商业项目开发。而且，即使是为了研究，用这些也可以打一个很好的基础。
Echart图表库层次关系
1.引入目录
废话不多说了，看到好东西，第一步是从github上把相关文件全下下来，然后到build目录翻箱倒柜把东西找齐。新建目录如下：
echarts-1.3.8&-zrender & //zrender是echart依赖的绘图库，官网要求下载，但是目前我的程序中并没有直接引用它，可以说普通情况下echart可以自己独立运行&&&zrender.js&-excanvas_r3 //excanvas是实现IE7，8兼容canvas绘图的利器，实现了大部分canvas的API，在绘图方面其核心是通过IE的VML去实现的，效率较低&&&excanvas.js&-echarts.js &//echarts主程序，包含除map以外所有的主题图库。注意这个是压缩过的，并且只能通过requirejs或者esl.js模块化加载；想用标签或sea.js加载请用echarts-plain.js&-echarts-orginal.js &//没有压缩过的echarts.js&-echarts-map.js &//echarts的map主题图库
2.在自己的项目中实现其demo
这个echart是百度前端做的，他们推荐使用模块式开发。好在我之前的项目，就是采用requirejs + angularjs开发的。所以引入比较容易。
首先，在requirejs的入口配置文件main.js里加上echart:
require.config({
baseUrl:'application/views/frontEnd/build/'
//这里省略若干配置信息...
//echart及其组件
,echarts: 'lib/echarts-1.3.8/echarts'
,"echarts/chart/line": 'lib/echarts-1.3.8/echarts'
,"echarts/chart/bar": 'lib/echarts-1.3.8/echarts'
,'echarts/chart/scatter': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/k': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/pie': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/radar': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/map': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/chord': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/force': 'lib/echarts-1.3.8/echarts'
,zrender: 'lib/echarts-1.3.8/zrender/zrender'
,priority:[
//,urlArgs:'v=1.1'
然后，在要引入echart的具体页面控制js文件里，加载相关依赖。
'echarts',
'echarts/chart/pie',
], function (ec) {
function common_chart_staff_assess_ctrl($http, $scope) {
// angularjs的控制器....
return common_chart_staff_assess_
以上两步，熟悉dojo或者requirejs的朋友应该都毫无压力，但是还是有很多朋友没用过这些，所以还是有必要说一下的。
接着就是把官网的例子放在自己的页面里实现。这里我选取了一个特别的千层饼图，点击去官网查看原图。
那么我们把例子里的静态数据（option对象）搬运到我们自己的JS文件中，然后仿照官网的例子写一个渲染&刷新函数
//渲染&刷新函数
$scope.refresh = function(option,isBtnRefresh){
if (isBtnRefresh) {
needRefresh = true;
if (needRefresh) {
myChart.showLoading();
setTimeout($scope.refresh(option), 500);
needRefresh = false;
if (myChart && myChart.dispose) {
myChart.dispose();
myChart = ec.init(domMain);
window.onresize = myChart.
myChart.setOption(option, true);
domMessage.innerHTML = '';
//测试数据
$scope.option = {
text: '浏览器占比变化',
subtext: '纯属虚构',
x:'right',
y:'bottom'
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b} : {c} ({d}%)"
orient : 'vertical',
x : 'left',
data:['Chrome','Firefox','Safari','IE9+','IE8-']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
calculable : false,
series : (function(){
var series = [];
for (var i = 0; i & 30; i++) {
series.push({
name:'浏览器（数据纯属虚构）',
type:'pie',
itemStyle : {normal : {
label : {show : i & 28},
labelLine : {show : i & 28, length:20}
radius : [i * 4 + 40, i * 4 + 43],
{value: i * 128 + 80,
name:'Chrome'},
{value: i * 64
name:'Firefox'},
{value: i * 32
name:'Safari'},
{value: i * 16
name:'IE9+'},
{value: i * 8
+ 1280, name:'IE8-'}
series[0].markPoint = {
symbol:'emptyCircle',
symbolSize:series[0].radius[0],
effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
data:[{x:'50%',y:'50%'}]
setTimeout(function(){
var _ZR = myChart.getZrender();
// 补充千层饼
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2,
y : _ZR.getHeight() / 2,
color: '#666',
text : '恶梦的过去',
textAlign : 'center'
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2 + 200,
y : _ZR.getHeight() / 2,
brushType:'fill',
color: 'orange',
text : '美好的未来',
textAlign : 'left',
textFont:'normal 20px 微软雅黑'
_ZR.refresh();
然后在页面上找个div，显示echart就可以了。
不过请注意一定要给这个div设置宽度高度，否则图显示不出来不要怪我。
&section class="span12"&
&div id="graph" class="graph chart-area" style="height:500px"&&/div&
&/section&
我这里用了bootstrap，宽度是按栅格系统的百分比值变化的，所以上面的代码中没有指定宽度。最后调试调试，没有问题我这里也可以显示。
当然，仅仅停留在引用别人的例子是不能让我满意的。
首先，要进行数据绑定。
这里细分为3步：
分析数据格式（就是分析option对象，这一步需要注意把后台获取的数据和样式信息分开。故而我在代码里设置了$scope.option对象存储默认的样式配置信息，之后ajax获取数据后将二者再extend即可。）
在后台组装相应的数据（根据不同需求而异，我这里只取数值信息，不多言）
前台ajax获取真实数据（这一点相信大家都很纯熟，不过我的代码里是使用angularjs封装过的$.post对象来做到这一点的）
//设置真实数据格式
$scope.default_option = {
text: '故障类型时序变化年轮图',
subtext: '本图由内向外展示了各种故障类型的出现频率所占百分比，及其随时间变化的规律',
x:'right',
y:'bottom'
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b} : {c} ({d}%)"
orient : 'vertical',
x : 'left',
selected: $scope.faultnameSelected
,data:$scope.faultname
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
calculable : false,
series : {}
$scope.ajaxChartData = function(dataname){
myChart.showLoading({
text: '正在努力的读取数据中...',
//loading话术
$http.post("index.php/main/readfaultnum", null).success(function(alldata){
console.log(alldata);
var option = $scope.default_
option.series = $scope.setData(alldata);
$scope.refresh(option,true);
$scope.order =
myChart.hideLoading();
}).error(function(){
domMessage.innerHTML = '网络故障，获取数据失败';
5.进一步定制
虽然我使用了官网的例子实现了需求，但是我还有些自己的想法。
官网的千层饼图中，代表时间的年轮宽度是固定的。但是我们从后台读取的数据（以月为颗粒度）在时间上是变化的，随着系统使用时间增长而增长。这就导致一个问题，就是在只有一个月时，年轮只有小小一个，有50个月时，年轮多到超过了显示范围。这样很不美观，并且丧失了一定的可用性。
我决定要对其进行优化。当使用月份很少导致数据很少的时候，年轮会很宽；当使用月份很多导致数据很多的时候，年轮会很细&&这样就可以同时避免数据量小的时候不美观和数据量大的时候丧失可用性的问题了。当然，如果数据量过大，年轮就会过细，同样会丧失可用性。因此我们要设置一个最大数据量的阈值，把超过的部分砍掉。
解决方案就是要对根据数据量对年轮宽度进行缩放，也就是使用比例尺函数。在echart里我暂时没有找到这样的比例尺函数。当然，线性比例尺很简单，函数可以自己写。但是其他类型的比例尺缩放就稍微要一些技巧了。好在之前我一直是使用d3类库来做可视化的，我知道d3里有这样的比例尺函数可以很容易地解决我的问题。那就是d3.scale对象，其中包含线性比例尺、平方比例尺、指数比例尺、集合比例尺，完全可以满足需要。我可以从开源的d3库中把比例尺函数抽取出来，也引入到这个页面。根据实际数据的测试结果，我选择了平方比例尺。那么接下来就很好写了：
var maxTime = 36; //本千层饼图最多显示60个月的数据（最多显示60个圈）
//原始数据的加工工厂函数
$scope.setData = function(data){
//这是D3的平方比例尺函数，用于根据数据大小缩放环的宽度
var rScale = d3.scale.sqrt()
.domain([maxTime, 1])
.range([3, 30])
console.log(rScale(1), rScale(12), rScale(36))
//如果数据量超过60（即有60个月），则删除60个月之前的数据，只显示最近60个月的内容
if(data.length & maxTime){
data.splice(0, maxTime);
//经过D3比例尺计算的环的宽度
var R = rScale(data.length);
console.log(R);
for(var i=0; i&data. i++){
data[i]['type'] = 'pie';
data[i]['radius'] = [i * R + 40, i * R + 40 + R];
//if(typeof($scope.times[i])!= null)
data[i]['name'] = $scope.times[i];
data[i]['itemStyle'] = {normal : {
label : {show : i & (data.length-2)},
labelLine : {
show : i & (data.length-2),
length:40,
color : '#f0f',
width : 10,
type : 'dotted'
//显示中央文字
setTimeout(function(){
var myDate = new Date();
var myMouth = myDate.getMonth()+1;
var myYear = myDate.getFullYear();
//获取完整的年份(4位,1970-????)
// 补充千层饼中央的说明文字
var _ZR = myChart.getZrender();
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2,
y : _ZR.getHeight() / 2,
color: 'orange',
text : data.length + '个月前',
textAlign : 'center'
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2 + data.length * R +50,
y : _ZR.getHeight() / 2,
color: 'orange',
strokeColor: 'pink',
text : '今日 ' + myYear + "年" + myMouth + "月" ,
textAlign : 'left',
textFont:'normal 14px 微软雅黑'
_ZR.refresh();
这样，无论数据量大小，年轮图都有可用性：
只有4个月数据时的年轮图
30个月的测试数据的年轮图
当然，做到这一步，虽然实现了需求，但毕竟是照着别人的例子修改，没有自己创作来的有深度。不过如何自己创作，就超过了本文的范畴，并且也不是这一篇博客所能包含得了的，日后再议。
5.浏览器兼容性：
最后必须一提浏览器兼容性问题。IE8、IE7浏览器不兼容canvas绘图（IE6请允许我直接无视），为了实现兼容需要引入excanvas_r3库。
&!--Le HTML5 shim,forIE6-8supportofHTML5elements--&
&&&&&!--[ifltIE9]&
&&&&&&&script src="application/views/frontEnd/build/lib/html5shiv.js"&&/script&
&&&&&&&script src="application/views/frontEnd/build/lib/echarts-1.3.8/excanvas/excanvas.js"&&/script&
&&&&&![endif]--&
有时IE8中绘图错位，加入以下代码启用IE7兼容模式即可解决：
&!--解决IE8中canvas绘图错位--&
&&&&&!--[iflt IE9]&
&&&&&meta http-equiv="X-UA-Compatible"content="IE=7"/&
&&&&&![endif]--&
&& 本文固定链接:
阅读(...) 评论()
这里是我的博客备份，我的个人主站点地址是：http://www.storagelab.org.cn/zhangdi/&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
前端数据可视化echarts.js使用指南
摘要：一、开篇首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据可视化的框架琳琅满目,例如:D3.js、hightcharts.js、echarts.js…………。由于公司对这个项目的需求是1、开发时间短,所以也就限制了D3.js的使用。2、要尽量的减少开发的成本,所以也就不能使用hightcharts.js(hightcharts是一款个人免
首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据可视化的框架琳琅满目,例如:D3.js、hightcharts.js、echarts.js…………。由于公司对这个项目的需求是1、开发时间短,所以也就限制了D3.js的使用。2、要尽量的减少开发的成本,所以也就不能使用hightcharts.js(hightcharts是一款个人免费,商业付费的框架)。所以在再三的比对之下最终选择了echarts.js
二、echarts.js的优势与总体情况
echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点
1、echarts.js容易使用
echarts.js的官方文档比较详细,而且官网中提供大量的使用示例供大家使用
2、echarts.js支持按需求打包
echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积
3、echarts.js开源
4、支持中国地图功能
这个在其他的一些框架中是没有的,所以为这个功能点个赞
但是echarts.js也存在着一些不好的地方,比如说:
1、echarts.js的体积较大
一个基础的echarts.js都要400K左右,相对于D3.js和hightcharts.js来说都是比较大的
2、echarts.js的可定制性差
说到echarts.js的定制性差,其实不止是包括echarts.js,hightcharts.js也是如此,因为这一类型的数据可视化框架主要是高度的进行分装,所以你在使用的时候只需要设置一下配置就可以了,但是如果是出现了要绘制配置中不支持的图表怎么办,那么你就只能放弃,尝试着使用其他的框架了
总的来说:从大的方向上面来看,echarts.js还是值得去了解学习使用的,因为echarts.js得到了百度团队的重视,在git上面的更新也是比较的频繁,所以不会出现一些比较严重的bug之类的,最后这款框架一点就是框架的配置文件相当的详细,但是交互API文档虽然有说明,但是还是没有示例来举证,这个可能就是我认为的一个不足之处吧
三、echarts的应用
首先要说明一点是,echarts这个框架的配置内容很是多,所以不要尝试着把这个框架中的方法都给记住,这是不太可能的事。但是由于这个框架的配置文件参数比较多,所以我们就需要来学习一下echarts是怎样来对其进行分类的
1、首先echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化,最后把配置方法(setOption)赋值到初始化图形中,详细的配置文件请戳 这里 ,这里我就来介绍一下关于配置文件的学习的经验之谈,比较常见的配置大致如下图:
上面用红色方框标出来的就是echarts的基础配置,也是我认为的学习echarts一定要掌握的配置,其他的一些配置比如什么时间轴.visualMap组件之类,我认为这些异曲同工,所以这一部分也就是只有在当你的业务需要使用的时候才加入,也就是说,这一部分的知识我认为到时候现炒现卖就可以了(更正: 图标悬停的提示内容应该更正为鼠标悬停的提示内容 ),下面我就来讲解一下echarts.js的使用,首先我在官网中下载默认的精简版,下载地址如下:http://echarts.baidu.com/builder.html,直接下载即可(建议在开发期间使用源码版,方便调试)
3.1 echarts.js入门基础小项目1
HTML和JavaScript代码:
echarts.js案例一
运行效果如下图,如果需要在线观看的请戳 这里
注意事项:这里案例是最基础,但是里面还是有一个知识点来的,就是在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数,如果是不想设置的话也要初始化可以将其设置为空JSON就可以了,要不然会出项报错,同时要保证在echarts.init之前的对象是有宽高的,要不然也会出现错误
3.2 echarts.js多系列综合使用DEMO
在讲解这个案例之前,首先我们来假设一个命题,假设要统计一个商店一周的购买金额和一周的销售金额,其中的购买金额用柱状图表示,销售金额用折线图表示,然后还要标出一周中最大值和最小值,同时还要求出销售和购买的平均数,购买金额分别是[200,312,431,241,175,275,369],销售金额[321,432,543,376,286,298,400]
这个问题其实也不是很难,想一想,其实也就是一个把多个 系列图表应用到一个画布上面的过程,为了简短文章的篇幅,所以把不贴出全部的代码,仅贴出主要的其中关键的代码,代码如下:
name:'购买金额',
type:'bar',
data:[200,312,431,241,175,275,369],
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
markLine:{
{type:'average',name:'平均值',itemStyle:{
color:'green'
name:'销售金额',
type:'line',
data:[321,432,543,376,286,298,400],
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
markLine:{
{type:'average',name:'平均值',itemStyle:{
color:'blue'
如需看完整的代码请戳 这里 ,自行fork下来
3.3 echarts.js响应式实现
echarts响应式在echarts官网上面的介绍比较详细,这里原理跟CSS3的媒体查询有点类似,但是echarts.js的响应除了支持媒体查询的在不同情况下面的相应还支持,根据长宽比来相应的方法,但是在官方文档中还是有一点缺陷的,比如:一个是案例中的响应式没有涉及到处理series之外的响应,另外一个是按照DEMO中去做,会发现每次都要刷新页面才能出现响应的结果,所以下面我将写一个简单的案例来解决这些问题,数据样式与上面的例子一样
这里就把所有的JS代码贴出来:
var echart=echarts.init(document.getElementById('main1'));
var option={
baseOption:{
text:'模拟商店一周销售情况',
subtext:'虚拟数据'
data:['购买金额','销售金额']
data:['周一','周二','周三','周四','周五','周六','周日']
show:true,
formatter:'系列名:{a}
name:'购买金额',
type:'bar',
data:[200,312,431,241,175,275,369],
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
markLine:{
{type:'average',name:'平均值',itemStyle:{
color:'green'
name:'销售金额',
type:'line',
data:[321,432,543,376,286,298,400],
markPoint: {
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
markLine:{
{type:'average',name:'平均值',itemStyle:{
color:'blue'
//小与1000像素时候响应
maxWidth:1000
show:true,
text:'测试一下'
//每次窗口大小改变的时候都会触发onresize事件,这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性,从而实现图表对象与窗口对象的尺寸一致的情况
window.onresize = echart.
echart.setOption(option);
效果展示:原本是想要展示GIF的,但是录制的时候卡顿太严重所以也就只能发一下在无刷新的时候对比图片
3.4 echarts的API交互
首先我们来理清官方文档中的API的分类,大致的API可以分成这样的四类
这里我们就来解释一下echarts对象里面主要是包括一些销毁对象(dispose),注册地图(registerMap),初始化对象(echarts.init),关联对象(connect),属于全局属性的设置,echartsInstance这个是包含echarts图中的某些属性的获取或者设置,获取宽高(getWidth、getHeight),获取配置(getOption),设置配置(setOption)等操作action和events这两个操作在上图中已经很明白了,所以就不多做解释,具体的使用方法要与业务进行挂钩才有意义,所以在这里就不提供DEMO了,我相信大家看一下文档都能够看懂个究竟。
四、echarts常见问题解决
1、当X轴上面要渲染的数据太多的时候就会出现只渲染出来一部分,但是图表中的数据显示(比如说柱状图中的每个柱子)又会自动的进行宽度的缩放,所以会导致X轴与图中的信息不相匹配的问题,解决的方 法是在X轴设置axisLabel :{&interval:0&}这个属性问题就可以解决了,Y轴的使用方法相同
2、为了使echart图表随着浏览器的大小发生响应式变化,所以需要在设置配置之前添加&window.onresize = echart. &具体参照3.3 示例
内容持续更新中,敬请期待
虽然echarts在同类型的数据可视化框架中还算是比较的简单易用的,但是在入手的时候可能也会有一些比较麻烦的地方困扰着你,比如文档这么多我怎么看,实例已经比较齐全了我还需要看API文档吗,这些问题我想在这里统一的说一下,其实echarts的学习无外乎就是先了解一下框架大致上的分类,然后是在将全部的API阅读以便,使对框架有一个全局的认识,然后在通过实践去深入学习,示例只不过是这一步的一个辅助而已,只有扎扎实实的通过学习API一步一个脚印去了解学习,才能做到在使用的时候心中有底。以上的文章是博主在学习和项目中使用echarts的一些体会,希望对大家有帮助
来自:http://www.cnblogs.com/st-leslie/p/5771241.html
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
前端数据可视化echarts.js使用指南相关信息，包括
的信息，所有前端数据可视化echarts.js使用指南相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International