Echarts的基本使用（具体参照文档）
Echarts基本配置
详细看AIP文档
步骤1:引入echarts.js文件
<script src="./Echart上手部分/package/dist/echarts.js"></script>
步骤2:准备一个呈现图标的盒子
<div id="main" style="width: 900px; height: 300px;"></div>
步骤3:初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
步骤4:准备配置项
var option={}
步骤5:将配置项设置给echarts实例对象
myChart.setOption(option)
通用配置
通用配置之——title的相关配置
var option = {
title:{
text:'成绩展示',
textStyle:{
color:'red'
}
borderWidth:5,
borderRadius:5,
borderColor:'blue',
left:30,
top:30
}
}
通用配置之——tooltip的相关配置
var option = {
tooltip:{
//trigger:'item',默认
trigger:'axis'
//triggerOn:'mousemove',默认
triggerOn: 'click'
}
}
通用配置之——toolbox的相关配置
var option = {
toolbox:{
saveAsImage:{},//导出图片
dataView:{},//数据视图
restore:{},//重置
dataZoom:{},//区域缩放
magicType:{
type:['bar','line']//动态图标类型的切换
}
}
}
呈现效果：
通用配置之——legend的相关配置
var option = {
legend:{data:['语文','数学']}这里的data要与series的name匹配
}
呈现效果：
图表一
柱状图的基本实现和常见效果
最大值：
var option = {
series:[{
最大最小值
markPoint: {
data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]
},
平均值
markLine: {
data: [{type: 'average', name: '平均值'}]}
}]
}
图表二
折线图的基本实现和常见效果
基本实现
代码部分：
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '康师傅',
type: 'line',
data: yDataArr,
}
]
};
呈现效果：
常见效果
实现代码：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="./Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!-- 步骤2:准备一个呈现图标的盒子 -->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.x轴数据:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
// 3.y轴数据:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
// 4.将type的值设置为line
// 步骤3:初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
// 步骤4:准备配置项
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false //默认true 意思是是否两边留白，false就紧挨边缘
},
yAxis: {
type: 'value',
scale: 'true'
},
series: [
{
name: '康师傅',
type: 'line',
data: yDataArr,
markPoint: {
data: [
{
type: 'max'
},
{
type: 'min'
}
]
},
markLine: {
data: [
{
type: 'average'
}
]
},
markArea: {
data: [
[
{
xAxis: '1月'
},
{
xAxis: '2月'
}
],
[
{
xAxis: '7月'
},
{
xAxis: '8月'
}
]
]
},
smooth: 'true',
lineStyle: {
color: 'skyblue',
type: 'solid' // dashed dotted solid
},
areaStyle: {
color: 'pink'
}
}
],
};
// 步骤5:将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>
呈现效果：
堆叠图
实现代码：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="./Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!-- 步骤2:准备一个呈现图标的盒子 -->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.x轴数据:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
// 3.y轴数据:[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
// 4.将type的值设置为line
// 步骤3:初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
// 步骤4:准备配置项
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false //默认true 意思是是否两边留白，false就紧挨边缘
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: yDataArr,
stack: 'all',
areaStyle: {}
},
{
type: 'line',
data: yDataArr2,
stack: 'all',
areaStyle: {}
}
],
};
// 步骤5:将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>
呈现效果：
图表三
散点图的基本实现与常见效果
基本实现
代码部分：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="./Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!-- 步骤2:准备一个呈现图标的盒子 -->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.x轴数据:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
// 3.y轴数据:[220, 182, 191, 234, 290, 330, 310]
// 4.将type的值设置为scatter
// 步骤3:初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
// 步骤4:准备配置项
var xDataArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
var yDataArr = [220, 182, 191, 234, 290, 330, 310]
var option = {
xAxis: {
data: xDataArr,
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
data: yDataArr,
},
],
};
// 步骤5:将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>
呈现效果：
常见效果
气泡图
var option = {
xAxis: {
data: xDataArr,
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
data: yDataArr,
// 修改每个点的大小，value是每个y的数据
symbolSize: function (value) {
return value / 10
}
},
],
};
呈现效果：
涟漪效果
var option = {
xAxis: {
data: xDataArr,
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
// 涟漪效果
type: 'effectScatter',
data: yDataArr,
// 修改涟漪效果的大小
rippleEffect: {
scale: 10
},
showEffectOn: 'render' //render emphasis 默认render
},
],
};
图表一+二+三
直角坐标系图表：柱状图 折线图 散点图
直角坐标系的常用配置grid
基本代码：
var option = {
grid: {
show: true,
borderColor: 'skyblue',
borderWidth: 10,
left: 120,
top: 120,
width: 300,
height: 150,
containLabel: true, // 距离是包含坐标轴上的文字
}
}
基本效果：
直角坐标系常用配置axis
直角坐标系常用配置dataZoom
基本代码：
var option = {
dataZoom: [
{
type: 'slider',
// type: 'inside'
xAxisIndex: 0
},
{
type: 'slider',
// type: 'inside'
yAxisIndex: 0,
start: 0,
end: 80
}
],
}
图表四
饼图的基本实现与常见效果
基本实现：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="./Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图标的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var data = [
{
name: '淘宝',
value: 10000
},
{
name: '京东',
value: 20000
},
{
name: '唯品会',
value: 3000
},
{
name: '拼多多',
value: 5000
},
{
name: '美团',
value: 1000
},
{
name: '饿了么',
value: 4000
},
]
var option = {
series: [
{
type: 'pie',
data: data
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
常见效果：
代码实现：
var option = {
series: [
{
type: 'pie',
data: data,
label: { //饼图文字的显示
show: true, //显示文字，默认true
formatter(arg) {
console.log(arg);
return arg.name + '\n' + arg.percent + '%'
}
},
// radius: 40 //饼图的半径
// radius: '40%' //百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius: ['40%', '80%'] //第0个元素代表的是内圆的半径，第一个元素元素是外圆的半径
// roseType: 'radius' //南丁格尔图 饼图的每一个区域的半径是不同的
// selectedMode: 'single', //选中的效果，能够将选中的区域偏离圆点，一小段距离,这个是单选
// selectedOffset: 30, //选中效果偏离距离
// selectedMode: 'multiple', //这个是多选
}
]
}
图表五
地图的基本实现和常见配置
基本实现与常用配置：
<!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>Document</title>
<script src="./Echart上手部分/package/dist/echarts.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 500px; border: 1px solid red; "></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.准备中国地图的矢量数据
// 3.使用axios获取矢量地图
// 4.axios的回调函数中注册地图矢量数据echarts.registerMap('chinaMap',矢量地图数据)
// 5.配置geo的type为'map',map为'chinaMap'
var myChart = echarts.init(document.getElementById('main'));
// 发送数据请求
axios.get('./地图数据/china.json')
.then(function (response) {
console.log(response);
echarts.registerMap('chinaMap', response.data)
var option = {
geo: [
{
type: 'map',
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, //设置允许缩放以及拖动的效果
label: {
show: true //展示标签
},
// zoom: 1, //设置初始化的缩放比例
// center: [87.617733, 43.792818] 设置地图的中心点，这里以新疆的坐标为例，设置以新疆坐标作为中心点
}
]
};
myChart.setOption(option);
})
.catch(function (error) {
console.log(error);
});
</script>
</body>
</html>
常见效果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>Document</title>
<script src="./Echart上手部分/package/dist/echarts.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 500px; border: 1px solid red; "></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.准备中国地图的矢量数据
// 3.使用axios获取矢量地图
// 4.axios的回调函数中注册地图矢量数据echarts.registerMap('chinaMap',矢量地图数据)
// 5.配置geo的type为'map',map为'chinaMap'
var airData = [
{ name: '北京', value: 39.92 },
{ name: '天津', value: 39.13 },
{ name: '上海', value: 31.22 },
{ name: '重庆', value: 66 },
{ name: '河北', value: 147 },
{ name: '河南', value: 113 },
{ name: '云南', value: 25.04 },
{ name: '辽宁', value: 50 },
{ name: '黑龙江', value: 114 },
{ name: '湖南', value: 175 },
{ name: '安徽', value: 117 },
{ name: '山东', value: 92 },
{ name: '新疆', value: 84 },
{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },
{ name: '江西', value: 96 },
{ name: '湖北', value: 273 },
{ name: '广西', value: 59 },
{ name: '甘肃', value: 99 },
{ name: '山西', value: 39 },
{ name: '内蒙古', value: 58 },
{ name: '陕西', value: 61 },
{ name: '吉林', value: 51 },
{ name: '福建', value: 29 },
{ name: '贵州', value: 71 },
{ name: '广东', value: 38 },
{ name: '青海', value: 57 },
{ name: '西藏', value: 24 },
{ name: '四川', value: 58 },
{ name: '宁夏', value: 52 },
{ name: '海南', value: 54 },
{ name: '台湾', value: 88 },
{ name: '香港', value: 66 },
{ name: '澳门', value: 77 },
{ name: '南海诸岛', value: 55 }
]
console.log('-----');
var myChart = echarts.init(document.getElementById('main'));
// 发送数据请求
axios.get('./地图数据/china.json')
.then(function (response) {
// console.log(response);
echarts.registerMap('chinaMap', response.data)
var option = {
geo: [
{
type: 'map',
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, //设置允许缩放以及拖动的效果
label: {
show: true //展示标签
},
// zoom: 1, //设置初始化的缩放比例
// center: [87.617733, 43.792818] 设置地图的中心点，这里以新疆的坐标为例，设置以新疆坐标作为中心点
}
],
series: [
{
data: airData,
geoIndex: 0, //将空气质量的数据和第0个geo配置关联在一起
type: 'map'
}
],
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['white', 'red'] //控制颜色渐变的范围
},
calculable: true //出现滑块
}
};
console.log('-----');
myChart.setOption(option);
})
.catch(function (error) {
console.log(error);
});
</script>
</body>
</html>
常见效果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>Document</title>
<script src="./Echart上手部分/package/dist/echarts.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 500px; border: 1px solid red; "></div>
<script type="text/javascript">
// 地图的基本配置
// 1.Echarts最基本的代码结构
// 2.准备中国地图的矢量数据
// 3.使用axios获取矢量地图
// 4.axios的回调函数中注册地图矢量数据echarts.registerMap('chinaMap',矢量地图数据)
// 5.配置geo的type为'map',map为'chinaMap'
// 涟漪波动的配置
// 给series下增加一个新的对象
// 准备数据散点数据，配置给series下的另一个对象
// 配置series下的新对象的type值为effectScatter
// 指明散点图的坐标系统为geo
// 调整涟漪动画效果
// 设置涟漪效果的坐标，西藏为例
var scatterData = [
{
value: [91.132212, 29.660361]
}
]
var airData = [
{ name: '北京', value: 39.92 },
{ name: '天津', value: 39.13 },
{ name: '上海', value: 31.22 },
{ name: '重庆', value: 66 },
{ name: '河北', value: 147 },
{ name: '河南', value: 113 },
{ name: '云南', value: 25.04 },
{ name: '辽宁', value: 50 },
{ name: '黑龙江', value: 114 },
{ name: '湖南', value: 175 },
{ name: '安徽', value: 117 },
{ name: '山东', value: 92 },
{ name: '新疆', value: 84 },
{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },
{ name: '江西', value: 96 },
{ name: '湖北', value: 273 },
{ name: '广西', value: 59 },
{ name: '甘肃', value: 99 },
{ name: '山西', value: 39 },
{ name: '内蒙古', value: 58 },
{ name: '陕西', value: 61 },
{ name: '吉林', value: 51 },
{ name: '福建', value: 29 },
{ name: '贵州', value: 71 },
{ name: '广东', value: 38 },
{ name: '青海', value: 57 },
{ name: '西藏', value: 24 },
{ name: '四川', value: 58 },
{ name: '宁夏', value: 52 },
{ name: '海南', value: 54 },
{ name: '台湾', value: 88 },
{ name: '香港', value: 66 },
{ name: '澳门', value: 77 },
{ name: '南海诸岛', value: 55 }
]
var myChart = echarts.init(document.getElementById('main'));
// 发送数据请求
axios.get('./地图数据/china.json')
.then(function (response) {
console.log(response);
echarts.registerMap('chinaMap', response.data)
var option = {
geo: [
{
type: 'map',
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, //设置允许缩放以及拖动的效果
label: {
// show: true //展示标签
},
// zoom: 1, //设置初始化的缩放比例
// center: [87.617733, 43.792818] 设置地图的中心点，这里以新疆的坐标为例，设置以新疆坐标作为中心点
}
],
series: [
{
data: airData,
geoIndex: 0, //将空气质量的数据和第0个geo配置关联在一起
type: 'map'
},
{
data: scatterData, //配置散点的坐标数据
type: 'effectScatter',
coordinateSystem: 'geo', //指明散点使用的坐标系统 geo的坐标系统
rippleEffect: {
color: 'skyblue',
scale: 10 //设置涟漪动画的缩放比例
}
}
],
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['white', 'red'] //控制颜色渐变的范围
},
calculable: true //出现滑块
}
};
myChart.setOption(option);
})
.catch(function (error) {
console.log(error);
});
</script>
</body>
</html>
图表六
雷达图的基本实现和常见配置
基本代码：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="./Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.定义各个维度的最大值，通过radar属性配置
// 易用性，功能，拍照，跑分，续航，每个维度的最大值都是100
// 3.准备产品数据，设置给series下的data
// 华为手机1：80,90,80,82,90
// 中兴手机1：70，82，75，70，78
// 4.将type的值设置为radar
var myChart = echarts.init(document.getElementById('main'));
// 各个维度的最大值
var dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
},
]
var option = {
radar: {
indicator: dataMax, //配置各个维度的最大值
shape: 'polygon' //配置雷达图最外层图形 默认polygon(多边形) circle
},
series: [
{
type: 'radar', //radar 此图表是一个雷达图
data: [
{
name: '华为手机1',
value: [80, 90, 80, 82, 90]
},
{
name: '中兴手机1',
value: [70, 82, 75, 70, 78]
},
],
areaStyle: {}, //将每一个产品的雷达图形成阴影的面积
label: {
// show: true //显示数值
}
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
图表七
仪表盘的基本实现和常见配置
基本代码实现：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="./Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
// 1.Echarts最基本的代码结构
// 2.准备数据，设置给series下的data
// 3.将type的值设置为gauge
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [
{
type: 'gauge',
data: [
{
name: '指针1',
value: 97,
// 指针的样式
itemStyle: {
color: 'skyblue'
},
},
// 每一个对象代表一个指针
{
name: '指针2',
value: 70,
// 指针的样式
itemStyle: {
color: 'pink',
},
title: {
show: false, //是否显示标题,也就是name 默认true
},
detail: {
show: false //是否显示详情,也就是value 默认true
}
}
]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
Echarts高级使用
主题的使用
内置主题的使用
// 内置主题:默认为light, 有light,dark
var myChart = echarts.init(document.getElementById('main'), 'dark');
自定义主题的使用
1.在线编辑主题主题编辑器 - Apache ECharts
2.下载主题的js文件
3.在html导入js文件
4.在init方法中指明主题的名称
调色盘和颜色渐变的使用
调色盘
实现代码：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="../Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图标的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var data = [
{
name: '淘宝',
value: 10000
},
{
name: '京东',
value: 20000
},
{
name: '唯品会',
value: 3000
},
{
name: '拼多多',
value: 5000
},
{
name: '美团',
value: 1000
},
{
name: '饿了么',
value: 4000
},
]
var option = {
// 全局调色盘的使用
// color: ['orange', '#bfa', 'skyblue', 'purple', 'red', 'black'],
series: [
{
type: 'pie',
// 局部调色盘的使用
color: ['orange', '#bfa', 'skyblue', 'purple', 'red', 'black'],
data: data,
label: { //饼图文字的显示
show: true, //显示文字，默认true
formatter(arg) {
console.log(arg);
return arg.name + '\n' + arg.percent + '%'
}
},
// radius: 40 //饼图的半径
// radius: '40%' //百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius: ['40%', '80%'] //第0个元素代表的是内圆的半径，第一个元素元素是外圆的半径
// roseType: 'radius' //南丁格尔图 饼图的每一个区域的半径是不同的
// selectedMode: 'single', //选中的效果，能够将选中的区域偏离圆点，一小段距离,这个是单选
// selectedOffset: 30, //选中效果偏离距离
// selectedMode: 'multiple', //这个是多选
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
颜色渐变
代码实现：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="../Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图标的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<!-- 步骤2:准备一个呈现图标的盒子 -->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
// 步骤3:初始化echarts实例对象
// 参数，dom决定图标最终呈现的位置
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
// 步骤4:准备配置项
var xDataArr = ['张三', '李四', '王五', '小明', '小红']
var yDataArr = [60, 92, 63, 77, 95]
var option = {
title: {
text: '颜色渐变'
},
legend: {
data: ['语文分数']
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文分数',
type: 'bar',
data: yDataArr,
color: {
type: 'linear', //线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: 'red' //0%出的颜色为红色
},
{
offset: 1, color: 'blue' //100%出的颜色为蓝色
}
]
// type: 'radial', //径向渐变
// x: 0.5,
// y: 0.5,
// r: 1,
// colorStops: [
// {
// offset: 0, color: 'red' //0%出的颜色为红色
// },
// {
// offset: 1, color: 'blue' //100%出的颜色为蓝色
// }
// ]
}
}
]
};
// 步骤5:将配置项设置给echarts实例对象
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
直接样式和高亮样式的使用
实现代码：
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="../Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图标的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<div id="main" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [
{
type: 'pie',
// 局部调色盘的使用
data: [
{
name: '淘宝',
value: 10000,
itemStyle: {
// 控制淘宝这一区域的样式
// color: 'yellow'
},
label: {
// color: 'green'
},
// 该属性是选中区域触发
emphasis: {
itemStyle: {
// 控制淘宝这一区域的样式
color: 'yellow'
},
label: {
color: 'green'
},
}
},
{
name: '京东',
value: 20000
},
{
name: '唯品会',
value: 3000
},
{
name: '拼多多',
value: 5000
},
{
name: '美团',
value: 1000
},
{
name: '饿了么',
value: 4000
},
],
label: { //饼图文字的显示
show: true, //显示文字，默认true
formatter(arg) {
console.log(arg);
return arg.name + '\n' + arg.percent + '%'
}
},
// radius: 40 //饼图的半径
// radius: '40%' //百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius: ['40%', '80%'] //第0个元素代表的是内圆的半径，第一个元素元素是外圆的半径
// roseType: 'radius' //南丁格尔图 饼图的每一个区域的半径是不同的
// selectedMode: 'single', //选中的效果，能够将选中的区域偏离圆点，一小段距离,这个是单选
// selectedOffset: 30, //选中效果偏离距离
// selectedMode: 'multiple', //这个是多选
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
图表自适应的实现
图表加载动画的实现
基本实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../Echart上手部分/package/dist/echarts.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
// var data =
var mCharts = echarts.init(document.querySelector("div"))
mCharts.showLoading() // 在获取数据之前, 显示加载动画
axios.get('../数据/test_data.json').then(function ({ data: ret }) {
// console.log(ret);
mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
var axisData = []
for (var i = 0; i < ret.length; i++) {
var height = ret[i].height
var weight = ret[i].weight
var itemArr = [height, weight]
axisData.push(itemArr)
}
// console.log(axisData)
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'effectScatter',
data: axisData,
symbolSize: function (arg) {
// console.log(arg)
var weight = arg[1]
var height = arg[0] / 100
// BMI > 28 肥胖
// BMI: 体重/ 身高*身高 kg m
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: {
color: function (arg) {
// console.log(arg)
var weight = arg.data[1]
var height = arg.data[0] / 100
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
},
showEffectOn: 'emphasis',
rippleEffect: {
scale: 10
}
}
]
};
mCharts.setOption(option)
})
</script>
</body>
</html>
图表增量动画的实现
<!DOCTYPE html>
<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</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="../Echart上手部分/package/dist/echarts.js"></script>
</head>
<body>
<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图标的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<!-- 步骤2:准备一个呈现图标的盒子 -->
<div id="main" style="width: 900px; height: 300px;"></div>
<button class="editData">修改数据</button>
<button class="addData">增加数据</button>
<script type="text/javascript">
// 步骤3:初始化echarts实例对象
// 参数，dom决定图标最终呈现的位置
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
// 步骤4:准备配置项
var xDataArr = ['张三', '李四', '王五', '小明', '小红']
var yDataArr = [60, 92, 63, 77, 95]
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
// trigger: 'item',
trigger: 'axis',
triggerOn: 'click'
},
legend: {
data: ['销量']
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
label: {
show: true
},
series: [
{
name: '语文分数',
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
}
]
};
// 步骤5:将配置项设置给echarts实例对象
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var btnEdit = document.querySelector('.editData')
// 点击修改数据按钮触发
btnEdit.onclick = function () {
const newYDataArr = [10, 20, 30, 77, 95]
// setOption 可以设置多次
// 新的option和旧的option
// 新旧option的关系并不是相互覆盖的关系,是互相整合的关系
// 我们在设置新的option的时候,只需要考虑到变化的部分就可以了\\
const option = {
series: [
{
data: newYDataArr
}
]
}
myChart.setOption(option);
}
var btnAdd = document.querySelector('.addData')
// 点击增加数据按钮触发
btnAdd.onclick = function () {
xDataArr.push('小明')
yDataArr.push(60)
myChart.setOption(option)
}
</script>
</body>
</html>
