如何获取echart
Apache ECharts
实例化1
主要核心文件是这三个
将这三个文件放入webstorm 的 js文件夹中
按照官网文档的实例创建一个html，将body 的内容全部替换
引入js文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/echarts.js"></script><script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>
调整这个图位于页面的位置，修改div
<div id="main" style="position:absolute; width: 100%;height:100%;"></div>
归纳总结
实现echats主要分为三步
把文件引过来，第二部有一个dom容器，第三个有一个真是的js。
实例化2
将官网实例实例化
Examples - Apache ECharts
我们可以从官网找到很多实例，下面拿渐变堆积图举例。
点进去之后左边就是，这个图需要的代码。我们可以发现其实核心变化的就是option里面的内容。
把官网的option拿过来直接替换就可以。
主要玩的就是option里面的东西
案例三
示例如何绑定数据。
目标是实现一个投诉数量随着时间变化的折线图，如图
数据如图
首先官网上挑选喜欢的模板。
将这些值分别填入进对应的模块。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/echarts.js"></script><script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="position: absolute; width: 100%;height:100%;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '2016年3月-北京投诉量趋势'},tooltip: {trigger: 'axis'},legend: {data: ['男性', '女性']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: [20160301, 20160302, 20160303, 20160304, 20160305, 20160306, 20160307, 20160308, 20160309, 20160310, 20160311, 20160312, 20160313, 20160314, 20160315, 20160316, 20160317, 20160318, 20160319, 20160320, 20160321, 20160322, 20160323, 20160324, 20160325, 20160328, 20160329, 20160330, 20160331]},yAxis: {type: 'value'},series: [{name: '男性',type: 'line',// stack: 'Total',data: [976, 979, 995, 1003, 1008, 1018, 1024, 1037, 1041, 1054, 1058, 1068, 1082, 1085, 1096, 1110, 1120, 1126, 1132, 1139, 1151, 1164, 1171, 1182, 1190, 1224, 1238, 1249, 1261]},{name: '女性',type: 'line',// stack: 'Total',data: [1264, 1279, 1293, 1306, 1323, 1327, 1331, 1346, 1358, 1368, 1383, 1405, 1413, 1423, 1441, 1452, 1463, 1474, 1481, 1496, 1509, 1527, 1539, 1547, 1562, 1592, 1611, 1632, 1651]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>具体详细设计的调整，官网文档，配置项手册
常用的设置如下
背景色：background color
所在层级：配置项根目录
有如下几种设置方案
backgroundColor:"#000026", backgroundColor:"rgb(0,0,38)", backgroundColor:"rgba(0,0,38,1)",
获取颜色的方法
在线获取颜色
ColorBrewer: Color Advice for Maps
工具获取颜色：画图、photoshop
字体调整示例
title: {text: '2016年3月-北京投诉量趋势',textStyle:{fontFamily:"微软雅黑",color:"rgb(0,137,207)",fontSize:"18"}
},
修改位置
legend: {data: ['男性', '女性'],right: '10%',top:'auto',textStyle: {color:"black",fontSize: "12"}
},
常用的有 left、right、bottom、top，可以赋予
right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
其中left 和 top 还可以填写：
如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
修改x轴y轴
axisLine：x轴的线
axisTick: x轴的刻度
minorTick:x轴子刻度
axisLabel: x轴的标签文字
=========================================================================
axisLine：x轴的线，线的三元素，粗细、颜色、样式
axisTick：坐标的刻度
minorTick：子刻度
axisLabel：坐标文字标签，：旋转、字体
splitLine：分隔线，线的三要素，线的interval，是否显示
splitArea：分隔面
xAxis: {type: 'category',boundaryGap: false,axisLine: {lineStyle: {color: "rgb(0,137,207)",width: 4,type: "solid"}},axisTick: {lineStyle: {color: "#ffffff",width: 1,type: "solid"}},axisLabel: {rotate: 45,// interval:0,//强制显示所有标签interval: 3,color: "green"},data: [20160301, 20160302, 20160303, 20160304, 20160305, 20160306, 20160307, 20160308, 20160309, 20160310, 20160311, 20160312, 20160313, 20160314, 20160315, 20160316, 20160317, 20160318, 20160319, 20160320, 20160321, 20160322, 20160323, 20160324, 20160325, 20160328, 20160329, 20160330, 20160331]
},
修改线形
series: [{name: '男性',type: 'line',// stack: 'Total',data: [976, 979, 995, 1003, 1008, 1018, 1024, 1037, 1041, 1054, 1058, 1068, 1082, 1085, 1096, 1110, 1120, 1126, 1132, 1139, 1151, 1164, 1171, 1182, 1190, 1224, 1238, 1249, 1261],lineStyle: {normal: {color: 'rgb(225,95,0)',width: 4,type: 'dotted'}}},{name: '女性',type: 'line',// stack: 'Total',//线形lineStyle: {normal: {color: 'rgb(149,255,0)',width: 4,type: 'dotted'}},//线上的标签——万能方法// label: {// normal: {// show: true,// textStyle: {// color: 'rgb(225,255,0)'// }// }// },//官方写法label: {show: true,color:'rgb(225,255,0)',},//改变线上的点点symbol:"diamond",// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'symbolSize:28,data: [1264, 1279, 1293, 1306, 1323, 1327, 1331, 1346, 1358, 1368, 1383, 1405, 1413, 1423, 1441, 1452, 1463, 1474, 1481, 1496, 1509, 1527, 1539, 1547, 1562, 1592, 1611, 1632, 1651]}
]
对悬停信息进行修改 tooltip
tooltip: {trigger: 'axis',axisPointer: {type: 'line', label: {backgroundColor: '#6a7985'}}
},
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/echarts.js"></script><script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="position: absolute; width: 100%;height:100%;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '2016年3月-北京投诉量趋势'},tooltip: {trigger: 'axis',axisPointer: {type: 'line', label: {backgroundColor: '#6a7985'}}},legend: {data: ['男性', '女性']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: [20160301, 20160302, 20160303, 20160304, 20160305, 20160306, 20160307, 20160308, 20160309, 20160310, 20160311, 20160312, 20160313, 20160314, 20160315, 20160316, 20160317, 20160318, 20160319, 20160320, 20160321, 20160322, 20160323, 20160324, 20160325, 20160328, 20160329, 20160330, 20160331]},yAxis: {type: 'value'},series: [{name: '男性',type: 'line',// stack: 'Total',data: [976, 979, 995, 1003, 1008, 1018, 1024, 1037, 1041, 1054, 1058, 1068, 1082, 1085, 1096, 1110, 1120, 1126, 1132, 1139, 1151, 1164, 1171, 1182, 1190, 1224, 1238, 1249, 1261],lineStyle: {normal: {color: 'rgb(225,95,0)',width: 4,type: 'dotted'}}},{name: '女性',type: 'line',// stack: 'Total',//线形lineStyle: {normal: {color: 'rgb(149,255,0)',width: 4,type: 'dotted'}},//线上的标签——万能方法// label: {// normal: {// show: true,// textStyle: {// color: 'rgb(225,255,0)'// }// }// },//官方写法label: {show: true,color: 'rgb(225,255,0)',},//改变线上的点点symbol: "diamond",// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'symbolSize: 28,data: [1264, 1279, 1293, 1306, 1323, 1327, 1331, 1346, 1358, 1368, 1383, 1405, 1413, 1423, 1441, 1452, 1463, 1474, 1481, 1496, 1509, 1527, 1539, 1547, 1562, 1592, 1611, 1632, 1651]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>使用JSON及封装函数
整合json
在刚刚的案例中，数据分为三部分分别是：横坐标轴的数据、男性数据、女性数据
现在把他们封装成json，也就是这种格式，放在这个位置。
原先的位置通过这样的形势进行引用。
这样做将数据集中到了一个位置，后面传数据的时候直接传入json 就可以了。
封装函数
用 function 包起来。
将数据换成从函数变量里取
这里用 jquarry把数据给传进去的，我前端学的不好，没看懂。回头再补习下基础知识。
实例化3
理解折线图
通常体现随时间变化趋势。
标注特殊值
markPoint、markLine、markArea 分别标记点线面。
series: [{name: '男性',type: 'line',// stack: 'Total',data: jsondata.maleData,lineStyle: {normal: {color: 'rgb(225,95,0)',width: 4,type: 'dotted'}},markPoint: {symbol: 'pin',symbolSize: 50,data: [{name: '最大值',type: 'max',symbol: 'arrow',symbolSize: 30}, {name: '最小值',type: 'min',symbol: 'triangle',symbolSize: 30},]}},
