如有不足的地方还望大家多多指点
1.创建简单的图表
首先第一步下载echarts.js插件
点进去之后跟着步骤进行下载
下载完之后引入./js/echarts.js插件
<script src="./js/echarts.js"></script>
第二步:
创造一个容器，必须设置宽和高，具体大小不固定
<div id="main" style="width: 100%;height:99vh;"></div>
第三步:
创建一个script标签
<script type="text/javascript"></script>
第四步：
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。
下面就是完整的代码。然后具体编辑可以根据上面的链接进行修改哦~
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="./js/echarts.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 100%;height:99vh;"></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>
最终效果如下：
2.结构样式
<div id="main" style="width: 100%;height:99vh;"></div> <div style="position: absolute;bottom: 20px;left: 40%;"> <button id="sector">饼图</button> <button id="Cylindrical">柱状图</button> <button id="Folding">折线图</button> <button id="Scatterplot">散点图</button> </div>
3.json数据
let data; let xml = new XMLHttpRequest() xml.open('GET', 'js/index.json') xml.send() xml.onreadystatechange = function() { if (xml.status == 200 && xml.readyState == 4) { let text = xml.responseText; data = JSON.parse(text) title(data)//调用数据类型转换函数 box(data)//调用表格渲染函数 } }
[{ "name": "小张", "type": "line", "color": [{ "offset": 0, "color": "rgb(225,225,0)" }, { "offset": 1, "color": "rgb(85, 255, 127)" } ], "data": [{ "name": "语文", "value": 124 }, { "name": "数学", "value": 103 }, { "name": "英语", "value": 15 }, { "name": "化学", "value": 24 }, { "name": "物理", "value": 258 }, { "name": "地理", "value": 31 }, { "name": "体育", "value": 329 }, { "name": "生物", "value": 44 }, { "name": "历史", "value": 51 } ] }, { "name": "小红", "type": "line", "color": [{ "offset": 0, "color": "rgb(225,225,0)" }, { "offset": 1, "color": "rgb(0, 170, 255)" } ], "data": [{ "name": "语文", "value": 192 }, { "name": "数学", "value": 103 }, { "name": "英语", "value": 115 }, { "name": "化学", "value": 224 }, { "name": "物理", "value": 138 }, { "name": "地理", "value": 141 }, { "name": "体育", "value": 152 }, { "name": "生物", "value": 261 }, { "name": "历史", "value": 171 } ] }, { "name": "小王", "type": "line", "color": [{ "offset": 0, "color": "rgb(225,225,0)" }, { "offset": 1, "color": "rgb(255, 170, 255)" } ], "data": [{ "name": "语文", "value": 62 }, { "name": "数学", "value": 73 }, { "name": "英语", "value": 85 }, { "name": "化学", "value": 94 }, { "name": "物理", "value": 108 }, { "name": "地理", "value": 111 }, { "name": "体育", "value": 121 }, { "name": "生物", "value": 131 }, { "name": "历史", "value": 141 } ] }, { "name": "小陈", "type": "line", "color": [{ "offset": 0, "color": "rgb(225,225,0)" }, { "offset": 1, "color": "rgb(85, 255, 255)" } ], "data": [{ "name": "语文", "value": 42 }, { "name": "数学", "value": 53 }, { "name": "英语", "value": 55 }, { "name": "化学", "value": 64 }, { "name": "物理", "value": 68 }, { "name": "地理", "value": 71 }, { "name": "体育", "value": 81 }, { "name": "生物", "value": 91 }, { "name": "历史", "value": 101 } ] }, { "name": "小董", "type": "line", "color": [{ "offset": 0, "color": "rgb(225,225,0)" }, { "offset": 1, "color": "rgb(255, 255, 127)" } ], "data": [{ "name": "语文", "value": 22 }, { "name": "数学", "value": 33 }, { "name": "英语", "value": 35 }, { "name": "化学", "value": 44 }, { "name": "物理", "value": 48 }, { "name": "地理", "value": 51 }, { "name": "体育", "value": 61 }, { "name": "生物", "value": 71 }, { "name": "历史", "value": 81 } ] } ]
4.渲染图表函数
function box(data) { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '成绩表', textStyle: { color: '#ffaaff' } }, toolbox: { feature: { saveAsImage: {}, restore: {}, } }, tooltip: { trigger: 'item', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: '', show: true, backgroundColor: '#aaffff', shadowBlur: 22, shadowColor: 'red' }, xAxis: { data: tel, show: status }, yAxis: { show: status }, series: list }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }
5.柱状图和折线图还有散点图的数据格式
function title(data) { status = true tel = ['语文', '数学', '英语', '化学', '物理', '地理', '体育', '生物', '历史'] list = []; for (let i = 0; i < data.length; i++) { let obj = { type: data[0].type, name: data[i].name, data: data[i].data, step: data[i].step } list.push(obj) name.push(data[i].name) } }
6.柱状图
1. Cylindrical.onclick = function() { 2. data[0].type = 'bar' 3. title(data) 4. box(data) 5. }
7.折线图
Folding.onclick = function() { data[0].type = 'line' title(data) box(data) }
8.饼图
由于饼图的格式与其他不同所以我们要再次进行转换然后在调用渲染函数
sector.onclick = function() { tel = '' status = false kill = []; list = []; nam = []; for (let i = 0; i < data.length; i++) { data[i].type = 'pie' let num = 0; for (let q = 0; q < data[i].data.length; q++) { num += data[i].data[q].value } kill.push(JSON.parse(num)) let ob = { name: data[i].name, value: kill[i] } nam.push(ob) let obj = { name: '总成绩', type: data[0].type, data: nam } list.push(obj) } box(data) }
9.散点图
Scatterplot.onclick = function() { data[0].type = 'scatter' title(data) box(data) }
