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);将数据放到对象中
这样一个简单的echars图就完成了 至于其中的数据我们可以在后台使用json工具转化成前台所需格式<script type="text/javascript"> window.οnlοad=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); }
在前台data区直接使用即可