Echart是js中一款好用的统计图库;

js引入：

　　<script type="text/javascript" src="js/echarts.js"></script>

vue引入：

　　cnpm install echart -S

　　在需要使用的.vue文件中引入

　　import echarts from 'echarts/lib/echarts';

　　import 'echarts/lib/chart/line';

　　import 'echarts/lib/component/tooltip';

放置容器

　　<div id="echarts" style="width:500px;height:300px"></div>

　　注意：为Echart准备的容器必须指定宽高，不能用百分比，要想动态的改变echart的宽高，可以在JS中监测浏览器宽度的变化，动态设置；

初始化echart，并设置参数

　　var echarts = echarts.init(document.getElementById("echarts"));

　　echarts.setOption(option);

基础的Echart的使用就是这样了，下面再来看看其他的东西

　　option中有什么，这些参数有什么用？

　　color:['#ffffff'] 为坐标轴中显示的每条折线指定颜色

　　title: {text: ''} 标题

　　legend: {data: []} 图例

　　tooltip: {trigger: 'axis'} 鼠标悬停时的标记

　　grid: {x: 100, y: 100} 布局 xy轴在容器内部的相对位置

　　xAxis: {} x轴

　　　　type: category/value （x轴一般为category）

　　　　position: 显示位置

　　　　boundaryGap: true/false 为false时,折线起点x坐标为0,为true时,x坐标起点为每一份的一半

　　　　axisLine: {show: true/false, lineStyle: {color: ,type: solid/dashed, width}} x轴是否显示及显示的样式

　　　　axisTick: {show: true/false, lenght: , lineStyle} 轴标记，坐标轴两个左边之间分割的标记

　　　　axisLable: {} x坐标的值的显示

　　　　show: 是否显示坐标值

　　　　interval: number x坐标坐标的值显示间隔，如原本做本1,2,3,4,5,6,interval为0时显示全部,为1时,显示1,3,5,为2时,显示 1,4

　　　　rotate: x坐标值旋转的角度

　　　　margin：x坐标的值和x坐标轴之间的间隔

　　　　formatter： '{value}月' x坐标值显示成什么样,这么写最终显示xx月

　　　　textStyle: {} x坐标值的字体的样式

　　　　splitLine: {} x轴的竖网格线

　　　　splitArea: {show: , areaStyle:{color: }} 竖分坐标轴的坐标区域，使之显示不同的颜色

　　　　data: [] x坐标的值

　　yAxis: [] y轴 ,y轴可以有两根，数组内有一个对象，就有一根，默认在坐标轴的左边

　　　　y轴的属性类似于x轴，参照上方

　　series: [] 以折线为例，表示折线的坐标点（y轴）下面举个例子

　　　　{

　　　　　　name: 'xxx', 你这条线表示的什么

　　　　　　type: 'line', line表示线图，bar表示柱状图

　　　　　　yAxisIndex: 0/1 ,这条线的数据以哪个坐标轴为主,默认情况下，左边的坐标轴为0，右边的坐标轴为1

　　　　　　data: [], 坐标轴上显示的值

　　　　}

以上就是Echart使用的时候的一些基本属性，其他的属性在有特殊需求的时候再去学习；

如何使echart每一次都重新绘制，而不是当你添加一条数据之后，‘啪’的一下，直接就显示在坐标轴里；

var echart = null;

var rePrint = function(){

　　if(this.echart !== null){

　　　　this.echart.clear();

　　　　this.echart.dispose();

　　}

　　this.echart = echarts.init(document.getElementById('...'));

　　this.echart.setOption(option);

}

下面附上一个实例：

此工程是别人的，自己的写的丑比就不献丑了。