wangshijun / Angular Echarts
💹 angularjs bindings for baidu echarts
Stars: ✭ 367
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Angular Echarts
Vue Echarts V3
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 884 (+140.87%)
Mutual labels: chart, echarts
Flutter echarts
A Flutter widget to use Apache ECharts (incubating) in a reactive way.
Stars: ✭ 420 (+14.44%)
Mutual labels: chart, echarts
Echarts For Weixin
Apache ECharts (incubating) 的微信小程序版本
Stars: ✭ 5,479 (+1392.92%)
Mutual labels: chart, echarts
Echarts For Vue
📊📈 ECharts wrapper component for Vue 3 and 2
Stars: ✭ 42 (-88.56%)
Mutual labels: chart, echarts
React Echarts V3
React.js(v16.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 48 (-86.92%)
Mutual labels: chart, echarts
Echarts Php
Echarts-PHP a PHP library that works as a wrapper for the Echarts js library
Stars: ✭ 253 (-31.06%)
Mutual labels: chart, echarts
React Component Echarts
React component echarts. 组件式百度图表。
Stars: ✭ 175 (-52.32%)
Mutual labels: chart, echarts
datart
Datart is a next generation Data Visualization Open Platform
Stars: ✭ 1,042 (+183.92%)
Mutual labels: chart, echarts
Housepricing
HousePricing旨在提供房价的可视化预测,帮助用户更好的评估房产和预测未来的价格(dev)
Stars: ✭ 314 (-14.44%)
Mutual labels: echarts
Aachartcore Kotlin
📈📊⛰⛰⛰An elegant modern declarative data visualization chart framework for Android . Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.极其精美而又强大的 Android 数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
Stars: ✭ 332 (-9.54%)
Mutual labels: chart
Klinechart
📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)
Stars: ✭ 303 (-17.44%)
Mutual labels: chart
Angular Resizable
A lightweight directive for creating resizable containers.
Stars: ✭ 317 (-13.62%)
Mutual labels: angularjs
Reports kit
Beautiful, interactive charts and tables for Ruby on Rails
Stars: ✭ 349 (-4.9%)
Mutual labels: chart
Saturday Night Works
Takip ettiğim kaynaklardaki örneklere ait çalışmalar yer alır.
Stars: ✭ 312 (-14.99%)
Mutual labels: angularjs
Ng Metadata
Angular 2 decorators and utils for Angular 1.x
Stars: ✭ 356 (-3%)
Mutual labels: angularjs
Simplcommerce
A simple, cross platform, modularized ecommerce system built on .NET Core
Stars: ✭ 3,474 (+846.59%)
Mutual labels: angularjs
Angularjs Springmvc Sample Boot
A RESTful sample using Spring Boot, Spring MVC, Spring Data and Angular/Bootstrap.
Stars: ✭ 309 (-15.8%)
Mutual labels: angularjs
G2 React
This repo is being deprecated, check Ant Design Charts https://github.com/ant-design/ant-design-charts
Stars: ✭ 360 (-1.91%)
Mutual labels: chart
React Jsx Highcharts
Highcharts built with proper React components
Stars: ✭ 336 (-8.45%)
Mutual labels: chart
eCharts + AngularJS
AngularJS directives to use eCharts
Prerequisites
You will need the following things properly installed on your computer.
Breaking Changes in V1
-
echart
support is v3.4.0; -
angular
support is v1.6.2; - map chart requires additional work, see below;
- custome themes are removed, all uses the build in ones;
Building
-
Preparing
bower install
&npm install
-
default
gulp
develop with realtime monitor, automatic open browser to view example
- build
gulp build
Build file to dist
- publish
gulp publish
Build & bump npm versions
Usage
Install bower dependency and save for production
$ bower install angular-echarts --save
Inject echarts and angular-echarts file into page
<script src="path/to/bower_components/echarts/dist/echarts.js"></script>
<script src="path/to/bower_components/angular-echarts/dist/angular-echarts.min.js"></script>
Download and inject map definitions if you want a map chart: http://echarts.baidu.com/download-map.html
Add dependency and declare a demo controller
var app = angular.module('demo', ['angular-echarts']);
app.controller('LineChartController', function ($scope) {
var pageload = {
name: 'page.load',
datapoints: [
{ x: 2001, y: 1012 },
{ x: 2002, y: 1023 },
{ x: 2003, y: 1045 },
{ x: 2004, y: 1062 },
{ x: 2005, y: 1032 },
{ x: 2006, y: 1040 },
{ x: 2007, y: 1023 },
{ x: 2008, y: 1090 },
{ x: 2009, y: 1012 },
{ x: 2010, y: 1012 },
]
};
var firstPaint = {
name: 'page.firstPaint',
datapoints: [
{ x: 2001, y: 22 },
{ x: 2002, y: 13 },
{ x: 2003, y: 35 },
{ x: 2004, y: 52 },
{ x: 2005, y: 32 },
{ x: 2006, y: 40 },
{ x: 2007, y: 63 },
{ x: 2008, y: 80 },
{ x: 2009, y: 20 },
{ x: 2010, y: 25 },
]
};
$scope.config = {
title: 'Line Chart',
subtitle: 'Line Chart Subtitle',
debug: true,
showXAxis: true,
showYAxis: true,
showLegend: true,
stack: false,
};
$scope.data = [ pageload ];
$scope.multiple = [pageload, firstPaint ];
});
Use this markup for a quick demo
<div class="col-md-3" ng-controller="LineChartController">
<line-chart config="config" data="data"></line-chart>
<line-chart config="config" data="multiple"></line-chart>
</div>
Contribute
git clone [email protected]:wangshijun/angular-echarts.git
- change into the new directory
npm install
bower install
Running / Development
- open
docs/index.html
in browser
Or you can use
gulp server
and visithttp://localhost:8080
in Chrome browser, to avoidXMLHttpRequest Cross origin requests
error.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].