Code Monkey home page Code Monkey logo

echarts's Introduction

Apache ECharts

logo

Apache ECharts is a free, powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

中文官网 | ENGLISH HOMEPAGE

License Latest npm release NPM downloads Contributors

Build Status

Get Apache ECharts

You may choose one of the following methods:

Docs

Get Help

Build

Build echarts source code:

Execute the instructions in the root directory of the echarts: (Node.js is required)

# Install the dependencies from NPM:
npm install

# Rebuild source code immediately in watch mode when changing the source code.
# It opens the `./test` directory, and you may open `-cases.html` to get the list
# of all test cases.
# If you wish to create a test case, run `npm run mktest:help` to learn more.
npm run dev

# Check the correctness of TypeScript code.
npm run checktype

# If intending to build and get all types of the "production" files:
npm run release

Then the "production" files are generated in the dist directory.

Contribution

Please refer to the contributing document if you wish to debug locally or make pull requests.

Resources

Awesome ECharts

https://github.com/ecomfe/awesome-echarts

Extensions

License

ECharts is available under the Apache License V2.

Code of Conduct

Please refer to Apache Code of Conduct.

Paper

Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen. ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization. Visual Informatics, 2018.

echarts's People

Contributors

100pah avatar albertshaw avatar chfw avatar cuijian-dexter avatar dependabot[bot] avatar deqingli avatar erik168 avatar fuchunhui avatar g7i avatar i6ma avatar jiawulin001 avatar kener avatar kongmoumou avatar linghaosu avatar loutongbing avatar map1en avatar ovilia avatar pissang avatar plainheart avatar snailsword avatar ssthouse avatar striezel avatar susiwen8 avatar villebro avatar vvvickie avatar wf123537200 avatar wind108369 avatar xhong0 avatar yassilah avatar yufeng04 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

echarts's Issues

图表不可以拖拽

图表不可以拖拽,一拖拽之后曲线就断掉了,条形图也是,能拖拽的都有这个问题额

支持ajax么?

我没有看见ajax加载数据的接口和demo,支持ajax加载数据么?

数值轴上可以是时间吗?

hi,柱形图数值轴上可 不可以是时间?比如:8:10:00,9:10:00 。我在做一个时长统计,试了下,给时间好像不行

英文文档?

出一个英文的文档?目前可以先把example.html和slide下的whyEcharts.html弄出来,这两个比较吸引人。

移动设备的支持

在android和iOS中的支持不太好,比如点击饼图,滑动效果紊乱!

tooltip的自动定位

实测tooltip的示例页面,如果窗口较小,需要显示靠右边的axis上的tooltip时,会显示到viewport外面去,是否有选项可以设置让其向左显示,以保证tooltip始终在视窗范围内?

zrender中path问题。我画了一个闭合的路径,鼠标没有移动到路径里面时(只有一小块区域,闭合路径的正下方)也会有鼠标事件.下面代码为生成path

define(function() {

var p1 = {
    x : 100,
    y : 90
};
var cp = {
    x : 200,
    y : 90
};
var p2 = {
    x : 500,
    y : 290
};

var p21 = {
    x : 100,
    y : 100
};
var cp1 = {
    x : 200,
    y : 100
};
var p11 = {
    x : 500,
    y : 300
};

var polygon = [];

function bezierCurveTo(p1, cp, p2, width) {
    var t = 0;

    var c1x;
    //将要求出的控制点的x
    var c1y;
    //将要求出的控制点的y
    var c2x;
    //将要求出的终点的x
    var c2y;
    //将要求出的终点的y

    var px;
    //二次贝赛尔曲线上的点的x
    var py;
    //二次贝赛尔曲线上的点的y

    while (t < 1) {
        /*
         控制点是由起点和初始的控制点组成的一次/线性贝赛尔曲线上的点,
         所以由一次/线性贝赛尔曲线函数表达式求出c1x,c1y
         */
        c1x = p1.x + (cp.x - p1.x ) * t;
        c1y = p1.y + (cp.y - p1.y ) * t;

        /*
         终点是由初始的控制点和初始的终点组成的一次/线性贝赛尔曲线上的点,
         所以由一次/线性贝赛尔曲线函数表达式求出c2x,c2y
         */
        c2x = cp.x + (p2.x - cp.x ) * t;
        c2y = cp.y + (p2.y - cp.y ) * t;

        /*
         二次贝赛尔曲线上的点是由控制点和终点组成的一次/线性贝赛尔曲线上的点,
         所以由一次/线性贝赛尔曲线函数表达式求出px,py
         */
        px = c1x + (c2x - c1x ) * t;
        py = c1y + (c2y - c1y ) * t;
        //ctx.lineTo(px,py);
        polygon.push({
            x : px,
            y : py
        });
        t += 0.001;
    }
}

var arrow = '';


bezierCurveTo(p1,cp,p2);

arrow += 'M' + polygon[0].x+',' + polygon[0].y + ' C';

polygon.reduce(function(f,p){
    arrow += p.x +',' +p.y+' ';
},0);

polygon = [];
bezierCurveTo(p11,cp1,p21);
arrow += 'L' + polygon[0].x+',' + polygon[0].y + ' C';
polygon.reduce(function(f,p){
    arrow += p.x +',' +p.y+' ';
},0);

arrow += ' z';

//arrow += 'M200,200 L100,300 300,300 Z';
var ARROW_LIST = [{
    'id' : '0591',
    'text' : 'ARROW',
    'path' : arrow,
    x : 0,
    y : 0,
    'textX' : 280,
    'textY' : 340
}]
return {
    data : ARROW_LIST,
    width : 630,
    height : 530
};

});

面积堆积图,y轴刻度值似乎必须是10的倍数。

我这里有一个需求,splitNumber是4,min是0,max是100,这样y轴每个跨度应该是25,但是实际显示就是30,最大值自动变成120。是专门这么设计的吗?
另外,面积图的颜色是叠加效果的吗?也就是说最后的色彩显示效果是多个带alpha的颜色叠加在一起的?

legend太多显示不够美观

项目中有个饼图有很多legend,大概二三十个,如果使用echarts的话所有的legend都是会一下全罗列出来的,占用了大量可视空间,google的charts对多legend的处理是折叠起来可翻页的,不知道echarts会支持这种折叠翻页么?

在介绍ppt的地方有些小问题

一个是里导力布局关系图的地方,那些圆点一拖拉不好,背景变成粉红色了,经常发生。
一个是混搭的地方,折线图+柱状图的形式,我通过切换折线图到柱状图再切换回来,折线图不见了变柱状了
还有一个数据区域缩放,放大后,折腾了几次就发生了页面崩溃,另外怎么缩小还不会

第一个例子bug?

第一个例子切换到bar模式,拖拽后点击restore无法恢复,算bug吗?

yAxis的max min为何不生效?

参数配置如下。

option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['广告位展现量','点击量']
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [
              '2013-04-25',
              '2013-04-26',
              '2013-04-27',
              '2013-04-28',
              '2013-04-29',
              '2013-04-30',
              '2013-05-01'
            ]
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                textStyle: {color: '#186cc3'}
            },
            min: 0,
            max: 60000,
          scale: true,
            splitLine : {show : true}
        },
        {
            type : 'value',
            axisLabel : {
            },
            min: 0,
            max: 400,
            splitLine : {show : true}
        }
    ],
    series : [
        {
            name:'广告位展现量',
            type:'line',
            stack: '总量',
            symbol: 'emptyCircle',
            data:[45000, 42000, 50000, 55000, 51000, 52000, 55000]
        },
        {
            name:'点击量',
            type:'line',
            symbol: 'emptyCircle',
            yAxisIndex: 1,
            data:[200, 180, 280, 190, 290, 290, 283]
        }
    ]
};

预期效果:
image

此种效果的chart是否支持?

支持世界地图吗?

目前需要一个**地图和一个世界地图,同时希望**地图可以平滑放大到世界地图,世界地图能够平滑缩小到**地图,不知道echarts后续打算支持么?

Thank you all!

ECharts

Great design, has everything to succeed.
I am grateful to reviewers.

What's the typical way to reload data, and keep other options such as 'selected label', 'data zoom'.

I'm using a websocket connection to push tick to browser.
When new tick arrived, I run these code:

echart.clear();
echart.setOption({xAxis: new_option.xAxis, series: new_option.series});
    echart.refresh();

The new tick is plotted in chart, but failed to keep 'selected label' and 'data zoom' status.
Is there any way to plot new tick in existing chart and keep 'selected label' and 'data zoom'.

Thanks.

demo.html的一个小问题以及requirejs的兼容性问题

我使用http://ecomfe.github.io/echarts/doc/example/demo.html
这个作为学习echarts的开始。首先就遇到个小问题,154行哪里为何会多一个“,”。
其次我看你们说明里说是符合AMD规范的,那么我想我就应该可以用requirejs来代替esl.js。结果实践证明不行。找不到js.js这个东东,但是这个是属于esl的嘛。不知道是zrender还是echarts依赖于这个。这就明显不对了吧。

EChart是否支持连续画图?

看了EChart的Example后映像深刻,我想将其用于我的一个监控项目。不知道EChart是否支持连续的画折线图?

echarts支持IE7?

我使用的IE7没有下任何的支持HTML5插件,但是我把echarts整合到项目中使用时,发现用IE7也能顺利的绘图,echarts不是基于html5 Canvas吗,难不成它能让IE7也能支持HMTL5?

echarts与其他js库(比如dojo)相冲突

由于网站是使用dojo构建,在导入echarts后,发现两者冲突,特别是define,和require两个关键字,通过硬方法直接把define,require直接替换成其他单词,画图是可以成功了,但是有些未知BUG经常出现,对此很是担心,直接替换似乎不可取,不知道是否有其他解决的方法,还是你们在下个版本会解决这个问题,希望尽快得到答复,谢谢!

地图工具数据区间计算问题

地图工具在calculable:false并且splitNumber非0情况下数值所在区间定位有问题,例如823会显示在700-800区间,分析源码发现是dataRange.js中getColor(value)下idx取值公式有问题,我在项目中修改为
var idx=_colorList.length -Math.ceil((value - dataRangeOption.min)/((dataRangeOption.max - dataRangeOption.min)/_colorList.length))
问题解决,请予以确认。
另外,个人建议,非线性区间显示的时候应该为0-100,101-200,201-300...或者0-100,100.1-200,200.1-300,这应该取决于precision设置的精度

地图工具

请问地图有没有什么工具可以生成呢?能否先补充一个世界地图呢?

echarts 获取line的图注问题

echarts 获取line的图注问题,如何获取,目前将对象打印出来,发现就只有几个方法,没有暴露相应的属性,
这个图注如果想获取,再其他的地方显示的话,如何做??

多谢!!!![email protected]

Please Support NuGet

NuGet is a great platform to enable the developers make sure the libraries up to date easyly. Please also submit the library as the package on NuGet.

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.