eachers

​
eachers的网址：Apache ECharts

定义：

1.一个可以使用javascript实现的开源可视化库。

2.依赖轻量级的矢量图像库，提供直观，交互丰富，可高度个性化定制的数据可视化图标。

使用：
引入js文件

<script src="./js/echarts.min.js"></script>

创建个容器

<div id="container"></div>

创建一个实例

var echart = echarts.init(document.getElementById("container"))

定义配置项

var option = {}

工具箱

toolbox: {
            show: true,
            feature: {
                数据缩放
                dataZoom: {
                    yAxisIndex: 'none'
                },
                数据视图只读
                dataView: {
                    readOnly: false
                },
                魔法类型
                magicType: {
                    type: ['line', 'bar']
                },
                重置
                restore: {},
                保存图片
                saveAsImage: {}
            }
        },

调色盘

color:["#55aaff","#aaff7f","#55007f","#ffff00"],

图表的标题

title: {
            text: "我的第一个图表"
        },

图表的提示

tooltip: {},

图例

legend: {
    data: ["睡眠时长", "玩游戏时长", "上课时长"]
},

x轴线 y轴线

 xAxis: {
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
 yAxis: {},

设置数据

series: [{
                //数据名称
                name: "睡眠时长",
                //类型为柱状图
                type: "bar",
                //数据data
                data: [8, 10, 4, 5, 9, 4, 8],
                color:["#ac4cff"]
                itemStyle: {
                    color: linear,
                    borderRadius: [30, 30, 0, 0]
                }
            },
        ]

每个执行延迟的时候（idx就是下标，随着下标增大延迟变长）

animationDelay:function(idx){
   //越往后延迟越大
   return idx*200
},
animationDuration:function(idx){
	//每小格动画时间
	return idx*200
},
//弹性出现
animationEasing:"bounceInOut"

更新配置

 echart.setOption(option);

​