echarts 图标绘制之折线图

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);
}

下面附上一个实例：
http://echarts.baidu.com/echarts2/doc/example/axis.html#-en
此工程是别人的，自己的写的丑比就不献丑了。

转载于:https://www.cnblogs.com/hugystudy/p/7069889.html