echarts

[uniquejava]

echarts的文档: http://echarts.baidu.com/tutorial.html 所有的配置项: http://echarts.baidu.com/option.html 事件: http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

echarts-ng

angularjs的封装, 最轻量的一个: https://github.com/bornkiller/echarts-ng/tree/v0.3.13 注意不是最新版, 是tag=v0.3.13的, 无需任何修改可以直接使用echarts中的config

添加依赖 index.module.js

(function () {
  'use strict';

  angular
    .module('myapp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'echarts-ng', 'angular-d3-word-cloud',
      'ui.router', 'ui.bootstrap', 'datatables', 'datatables.bootstrap', 'datatables.scroller','toastr','angularSpinner', 'angularMoment','myapp.constants', 'ui.select']);

})();

myawesome.controller.js

  // part 1: pie chart
  vm.ec1 = $echarts.generateInstanceIdentity();
  vm.data1 = {
    tooltip : {
      trigger : 'item',
      formatter : "{a} <br/>{b} : {c} ({d}%)"
    },
    series : []
  };

  ApiService.findAwesomeData4PieChart().then(function(res) {
    var data = res.data;
    var series1 = {
      name : 'My Name',
      type : 'pie',
      radius : '60%',
      center : [ '50%', '50%' ],
      selectedMode : 'single',
      data : [],
      itemStyle : {
        emphasis : {
          shadowBlur : 10,
          shadowOffsetX : 0,
          shadowColor : 'rgba(0, 0, 0, 0.5)'
        }
      }
    };

    for (var i = 0; i < data.length; i++) {
      series1.data.push({
        value : data[i].myvalue,
        name : data[i].myname
      });
    }

    vm.data1.series.push(series1);

    $echarts.queryEchartsInstance(vm.ec1).then(function (echarts1) {
      console.log('echarts1=', echarts1);

      echarts1.on('click', function (params) {
        console.log(params);
      });
    });

  });

在html中如下使用(注意要给container设定width, 不然chart会显示不出来)

  <div style="width: 100%">
    <div echarts="vm.ec1" config="vm.data1" style="width: 100%; height:305px;"></div>
  </div>

[uniquejava]

堆叠柱状图 Stacked Bar Chart

http://vis.baidu.com/chartusage/stacked-bar/

柱状图中显示数值

echarts2: 
itemStyle : { normal: {label : {show: true, position: ‘top’}}},

echarts3: 
label:{ 
normal:{ 
show: true, 
position: ‘inside’} 
},

pie chart显示数值

https://www.oschina.net/question/1440737_148818?sort=time

x轴坐标文字显示不全

在echarts中应用柱状图或者折线图时，当数据量过多的时候，X轴的坐标就会显示不全，在ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是：interval。还有一个属性：rotate: number 度角是倾斜的控制所在。

https://blog.csdn.net/wu920604/article/details/53332520