Echarts基础
Echarts基础
1.echarts案例1-最简配置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts案例1title>
<script src="./js/echarts.js">script>
head>
<body>
<div class="box">
<div id="main" style="width: 600px;height: 400px;">div>
div>
<script>
//初始化echarts，指定图显示在哪个容器上
var myChart = echarts.init(document.getElementById("main"))
//图最基本配置
var option = {
//x轴
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
}
//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
, yAxis: {}
//具体数据
, series: [
//第一组数据
{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 360, 10, 10, 20, 60] // 系列中的数据内容
}
]
//趋势：折线图，年和年之间的对比选择柱状图，占比选择饼图
}
//将图配置显示到容器中
myChart.setOption(option)
script>
body>
html>
2.echarts案例2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts案例2title>
<script src="./js/echarts.js">script>
head>
<style>
/* 使用flex布局调整div位置 */
.box {
width: 100%;
height: 860px;
display: flex;/*指定flex布局*/
flex-wrap: wrap;/*指定换行*/
justify-content: space-around;/**/
}
style>
<body>
<div class="box">
<div id="main" style="width: 600px;height: 400px;">div>
<div id="main2" style="width: 600px;height: 400px;">div>
<div id="main3" style="width: 600px;height: 400px;">div>
<div id="main4" style="width: 600px;height: 400px;">div>
div>
<script>
//初始化echarts，指定图显示在哪个容器上
var myChart = echarts.init(document.getElementById("main"))
//图表配置
var option = {
title: {
text: "标题"
}
//提示信息配置
, tooltip: {}
//图例配置
, legend: {}
, legend: {}
//x轴
, xAxis: {
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
}
//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
, yAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
}
//具体数据
, series: [
//第一组数据
{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 360, 10, 10, 20, 60] // 系列中的数据内容
},
//第二组数据
{
name: '销量2', // 系列名称
type: 'bar', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 160, 10, 20, 20, 60] // 系列中的数据内容
},
//第三组数据
{
name: '系列1', // 系列名称
type: 'line', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 160, 10, 20, 20, 60] // 系列中的数据内容
}
]
}
//将图配置显示到容器中
myChart.setOption(option)
//初始化echarts，指定图显示在哪个容器上
var myChart2 = echarts.init(document.getElementById("main2"))
//图基本配置
var option2 = {
title: {
text: "标题"
}
//提示信息配置
, tooltip: {}
//图例配置
, legend: {}
//x轴
, xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]
}
//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
, yAxis: {}
//具体数据
, series: [
//第一组数据
{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 360, 10, 10, 20, 60] // 系列中的数据内容
},
//第二组数据
{
name: '销量2', // 系列名称
type: 'bar', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 160, 10, 20, 20, 60] // 系列中的数据内容
},
//第三组数据
{
name: '系列1', // 系列名称
type: 'line', // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: [5, 20, 160, 10, 20, 20, 60] // 系列中的数据内容
}
]
}
//将图配置显示到容器中
myChart2.setOption(option2)
//配置第三个图表
var myChart3 = echarts.init(document.getElementById("main3"))
myChart3.setOption(option)
//配置第四个图表
var myChart4 = echarts.init(document.getElementById("main4"))
myChart4.setOption(option2)
script>
body>
html>