Echarts使用（一）-JS包的导入和前台图表界面的初步实现

1.Echarts.js包下载 http://echarts.baidu.com(官网里面有)，或者查看下载文末资源

 

2.Echarts.js放入程序...就直接把你下载完成的js包粘贴到你项目的JS文件夹下

 

3.将Echarts.js引入使用的网面

 src里面的内容是echarts.js的存放目录

4.准备一个容器用于图表的展示

5.js代码实现图表的初始化和数据加载

 

function Charts() {
//初始化Echarts控件
var myChart = echarts.init(document.getElementById('echartsShow'));
//清除myCharts展示（重新加载数据时最好加上）
myChart.clear();
// 显示标题，图例和空的坐标轴
myChart.setOption({
tooltip: {
show: true
},
legend: {
data: ['成绩']
},
xAxis: [
{
type: 'category',
data: ["语文", "数学", "英语", "化学", "物理", "生物"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "成绩",
"type": "bar",
"data": [120, 123, 118, 88, 82, 95]
}
]
});
}

6.设置页面运行时加载上段Js代码

 //用window的onload事件，窗体加载完毕的时候

    window.onload = function ()

    {

        Charts();

}

7.最后的实现效果如下（嗯，我这个优秀人，下面就是我的成绩）

 

最后说这么多，不给源码的人还是不是好人，是吧。。。哈哈哈，我是~有资源啦！

第一次发资源，下载至少要一个积分，我以为可以设置免费的呢。。。

https://download.csdn.net/download/smallxiannotimmortal/10882809

不建议下载。。。浪费

Ps.官网里的说明文档和栗子很好吃~