echars的使用
1、首先引入echars的js文件 该文件可从echars官网下载
在某些图表中可能会引用ecStat.js文件 如线性回归散点图 我们直接下载引用即可
<head>
<title></title>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
2、创建一个容纳和显示echars图表的div容器
<body>
<div id="ech" style="width: 600px;height: 500px"></div>
</body>
3、编写js显示echars图
至于要是用那个图标我们直接从官网复制其option格式就行，其用法都一样
我们仅仅复制下来是不能够显示的
我们还需要使用 echarts的init方法得到echars的div容器
然后就是复制官网的数据格式
最后将option数据使用myChart.setOption(option);将数据放到对象中
<script type="text/javascript">
window.onload=function (){
var myChart = echarts.init(document.getElementById("ech"));
alert("jj");
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'邮件营销',
type:'bar',
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
myChart.setOption(option);
}
