<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
backgroundColor: '#2c343c',
title: { //配置标题组件，包含主标题和副标题
text: '这是主标题',
textStyle: { //设置主标题样式
color: '#fff'
},
subtext: '这是副标题', //设置副标题样式
subtextStyle: {
color: '#bbb'
},
padding: [10, 0, 100, 100] //设置标题位置，用padding属性来定位
},
legend: { //配置图例组件
type: 'plain', //设置图例类型，默认为'plain'，当图例很多时可使用'scroll'
top: '1%', //设置图例相对容器位置，top\bottom\left\right
selected: {
'销量': true, //设置图例是否显示，默认为true
},
textStyle: { //设置图例内容样式
color: '#fff', //设置所有图例的字体颜色
//backgroundColor: 'black', //设置所有图例的字体背景色
},
tooltip: { //设置图例提示框,默认不显示
show: true,
color: 'red',
},
data: [ //设置图例内容
{
name: '销量',
icon: 'circle', //设置图例的外框样式
textStyle: {
color: '#fff', //单独设置某一个图例的颜色
//backgroundColor: 'black', //单独设置某一个图例的字体背景色
}
}
],
},
tooltip: { //配置提示框组件
show: true, //设置是否显示提示框，默认为true
trigger: 'item', //设置数据项图形触发
axisPointer: { //设置指示样式
type: 'shadow',
axis: 'auto',
},
padding: 5,
textStyle: { //设置提示框内容样式
color: "#fff",
},
},
grid: { //配置grid区域
show: false, //设置是否显示直角坐标系网格
top: 80, //设置相对位置，top\bottom\left\right
containLabel: false, //设置grid区域是否包含坐标轴的刻度标签
tooltip: { //鼠标焦点放在图形上，产生的提示框
show: true,
trigger: 'item', //设置触发类型
textStyle: {
color: '#fff666', //设置提示框文字的颜色
}
}
},
xAxis: { //配置x轴坐标系
show: true, //设置x轴坐标系是否显示
position: 'bottom', //设置x轴位置
offset: 0, //设置x轴相对于默认位置的偏移
type: 'category', //设置轴类型，默认'category'
name: '月份', //设置轴名称
nameLocation: 'end', //设置轴名称相对位置
nameTextStyle: { //设置坐标轴名称样式
color: "#fff",
padding: [5, 0, 0, -5],
}, //设置坐标轴名称相对位置
nameGap: 15, //设置坐标轴名称与轴线之间的距离
//nameRotate:270, //设置坐标轴名字旋转
axisLine: { //设置坐标轴轴线
show: true, //设置坐标轴轴线是否显示
symbol: ['none', 'arrow'], //设置是否显示轴线箭头
symbolSize: [8, 8], //设置箭头大小
symbolOffset: [0, 7], //设置箭头位置
lineStyle: { //设置线
color: '#fff', //设置坐标轴轴线的颜色
width: 1, //设置坐标轴轴线的线宽
type: 'solid', //设置坐标轴轴线的线型
},
},
axisTick: { //设置坐标轴刻度
show: true, //设置坐标轴刻度是否显示
inside: true, //设置坐标轴刻度是否朝内
lengt: 3, //设置长度
lineStyle: {
color: 'yellow', //设置坐标轴刻度的颜色，默认取轴线的颜色
width: 1, //设置坐标轴刻度的线宽
type: 'solid', //设置坐标轴刻度的线型
},
},
axisLabel: { //设置坐标轴标签
show: true, //设置坐标轴标签是否显示
inside: false, //设置坐标轴标签是否朝内
rotate: 0, //设置旋转角度
margin: 5,
}, //设置刻度标签与轴线之间的距离
//color:'red', }, //设置默认取轴线的颜色
splitLine: { //设置grid区域中的分隔线
show: false, //设置grid区域中的分隔线是否显示
lineStyle: {
color: 'red',
//width:1,
//type:'solid',
},
},
splitArea: { //设置网格区域
show: false,
}, //设置网格区域是否显示，默认false
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月",
"8月", "9月", "10月", "11月", "12月"]
},
yAxis: { //配置y轴坐标系
show: true, //设置网格区域是否显示
position: 'left', //设置y轴位置
offset: 0, //设置y轴相对于默认位置的偏移
type: 'value', //设置轴类型，默认'category'
name: '销量', //设置轴名称
nameLocation: 'end', //设置轴名称相对位置value
nameTextStyle: { //设置坐标轴名称样式
color: "#fff",
padding: [5, 0, 0, 5],
}, //设置坐标轴名称相对位置
nameGap: 15, //设置坐标轴名称与轴线之间的距离
nameRotate: 0, //设置坐标轴名字旋转
axisLine: { //设置坐标轴轴线
show: true, //设置坐标轴轴线是否显示
//-------------------箭头-------------------------
symbol: ['none', 'arrow'], //设置是否显示轴线箭头
symbolSize: [8, 8], //设置箭头大小
symbolOffset: [0, 7], //设置箭头位置
lineStyle: { //设置线
color: '#fff',
width: 1,
type: 'solid',
},
},
axisTick: { //设置坐标轴刻度
show: true, //设置坐标轴刻�
echart全部资料,有源代码和大屏讲解
需积分: 3 5 浏览量
2022-04-08
13:47:46
上传
评论
收藏 3.23MB ZIP 举报
echart全部资料,有源代码和大屏讲解 （102个子文件） 
reset.css 8KB 用户购买商品数量.csv 339B 用户分群.csv 183B 近5天新增和流失用户.csv 110B 用户类型占比.csv 99B 用户消费地点.csv 90B 用户消费时段.csv 81B
代码2-7.html 10KB 代码4-7.html 9KB 代码4-6.html 8KB 代码4-8.html 6KB 代码2-16.html 6KB 代码3-3.html 6KB 代码5-2.html 5KB 代码4-11.html 5KB total.html 5KB 代码3-2.html 5KB 代码5-9.html 5KB 代码4-5.html 5KB 代码4-13.html 5KB 代码2-12.html 5KB 代码5-10.html 5KB 代码3-7.html 5KB 代码2-8.html 4KB 代码3-4.html 4KB 代码4-9.html 4KB 代码5-12.html 4KB 代码2-15.html 4KB user.html 4KB 代码3-1.html 4KB 代码4-14.html 4KB 代码3-8.html 4KB 代码2-10.html 3KB 代码5-4.html 3KB sale.html 3KB 代码4-10.html 3KB 代码2-14.html 3KB 代码4-12.html 3KB 代码2-13.html 3KB 代码3-6.html 3KB 代码4-3.html 3KB inventory.html 3KB 代码3-5.html 3KB 代码5-3.html 3KB 代码5-8.html 3KB 代码3-9.html 2KB 代码4-4.html 2KB 代码4-2.html 2KB 代码5-7.html 2KB 代码5-5.html 2KB 代码5-11.html 2KB 代码5-1.html 2KB 代码4-15.html 2KB 代码2-9.html 2KB 代码5-6.html 2KB 代码2-6.html 1KB 代码2-11.html 1KB 代码4-1.html 1KB echarts.js 2.92MB echarts.js 2.92MB echarts.js 2.92MB echarts.js 2.92MB echarts.js 2.92MB jquery-3.3.1.js 265KB jquery-3.3.1.js 265KB echarts-wordcloud.min.js 30KB echarts-wordcloud.min.js 30KB echarts-wordcloud.min.js 30KB macarons.js 14KB roma.js 14KB infographic.js 14KB vintage.js 14KB shine.js 14KB dark.js 14KB charts.total.js 11KB charts.sale.js 10KB charts.user.js 9KB charts.int.js 7KB lossgrowth.js 2KB 不同区域的各指标数据.json 865B 售货机销售金额及其环比增长率.json 828B ch6_5_3_data.json 794B 用户购买的商品名称和商品数量数据.json 624B 不同类型的商品库存数量.json 505B 商品销量数量和价格数据.json 429B 各类商品存货周转天数.json 407B 商品库存数量和销售数量.json 403B ch6_5_2_data_pie.json 369B 商品滞销数据.json 354B 销售金额实际值与预测值.json 329B 用户分群数据.json 262B 商品销售数量前10.json 227B 不同地点售货机库存数量和缺货数量.json 206B 不同地点售货机销售数据.json 193B 无人售货机各特征数据.json 189B 近5日新增和流失用户数据.json 188B 不同类型用户的人数.json 174B 不同支付方式用户人数.json 166B 商品销售金额前5名.json 151B 用户消费地点数据.json 115B共 102 条
- 1
- 2
@追求卓越
- 粉丝: 16
- 资源: 1
最新资源
- STM32H750VBT6单片机最小系统开发板AD设计硬件（原理图+PCB+3D封装库）工程文件.zip
- 基于74LS161+ 74LS192芯片实现倒计时定时器Multisim仿真源文件，Multisim10以上版本可打开运行
- 科大讯飞语音引擎 jar包 demo,科大讯飞语音合成引擎3.0，支持4.0系统以上，文字转语音输出.zip
- Java架构面试笔试专题资料及经验（含答案）SpringBoot面试Linux面试专题及答案 合集.zip
- 头歌c语言实验答案tion-model-for-ne开发笔记
- docker配置使用-model-for-networK开发demo
- docker配置使用vaWeb-mas笔记
- c语言连接两个字符串-mas开发笔记
- 俄罗斯引擎yandex进入x-master 笔记
- 头歌c语言实验答案el-for-network-ids-ma笔记
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0