echarst图表-饼图、柱状图、折线图、散点图之间相互切换
如有不足的地方还望大家多多指点
目录
1.创建简单的图表
2.结构样式
3.json数据
4.渲染图表函数
5.柱状图和折线图还有散点图的数据格式
6.柱状图
7.折线图
8.饼图
9.散点图
1.创建简单的图表
首先第一步下载echarts.js插件
点击这里前往下载
点进去之后跟着步骤进行下载
下载完之后引入./js/echarts.js插件
第二步:
创造一个容器，必须设置宽和高，具体大小不固定
第三步:
创建一个script标签
第四步：
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。
下面就是完整的代码。然后具体编辑可以根据上面的链接进行修改哦~
ECharts
最终效果如下：
2.结构样式
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.柱状图
Cylindrical.onclick = function() {
data[0].type = 'bar'
title(data)
box(data)
}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)
}