大数据开发echarts所有要学习的主要图表 简单化 得分点
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录- 前言
- 一、echarts是什么？
- 二、使用步骤
- 1.引入js库
- 2.规划好css布局 引入（src）echarts
- 在之下重点编辑option集合的这一部分代码
- 主要几个效果实现编辑样式代码
- 主要编辑考核的图表 type类型对应
- 接下来我们编辑几个重要的图表
- 玫瑰图
- k线图
- 漏斗图
- 条形图
- 聚合图
- 气泡图-------这一块可以线定义一个数组放入
- 散点图
前言 一、echarts是什么？
结合数据的来源呈现的一个数据可视化界面 呈现不同的图形 如 折线饼图等等一些带个人直观的效果看到清晰的数据可视化 显示数值 百分比 等等诸如此类
二、使用步骤 1.引入js库
找不到echarts包的同学直接搜echarts官网 即可获取
#实例化初始化echarts 并且给它一个容器
mychart=echarts.init(document.querySelector(".box"))
在之下重点编辑option集合的这一部分代码
var option={
//中间实现echarts的组件 显示数值 标题等主要得分点 参考2021年国赛题目 实现的的得分点
}
主要几个效果实现编辑样式代码
title:{ -------------标题
}
legend{ ------------显示所带的显示名称
}
tooltip{ ---------------显示数值
}
xAxis:{}--------------x轴
yAxis:{}-------------y轴
series:[{--------------合集显示数值 放置type的地方
}]
##子属性
title:{ -------------标题
text:’ ’ -----主标题
subtext:’ '-----副标题
textStyle:{
color:‘rgb(255，0，0，1)’ --------显示标题红色
}
subtextStyle:{
color:‘rgb(255，0，0，1)’ --------显示副标题红色
}
}
}
tooltip:{
trgger:‘item’ -----显示数值
}
legend:{
left:‘left’-----数值名字方式地方
}
柱状------- bar
折线-------line
柱状堆叠-----bar
折线堆叠-----line
折线柱状混合— line和bar
饼图------pie
玫瑰图-----pie
数据聚合图-----boxplot
气泡图------scatter
地理坐标图-----map
k线图-----candlestick
盒须图-------boplot和scatter
条形图-------bar
雷达图-----radat
热力图----heatmap
关系图------graph
漏斗图-----funnel
仪表盘------gauge
var option={
title:{
text:'sadas',
subtext:'asdsad',
textStyle:{
color:'rgb(255,0,0,1)'
},
subtextStyle:{
color:'rgb(255,0,0,1)'
},
},
tooltip:{
tegger:'item'
},
legend:{
left:'left'
},
series:[{
radius:[50,250],------半径
roseType:'area',--------区域面积
itemStyle:{ ----------边界区域
borderRadius:8
},
type:'pie',
data:[
{value:5154,name:'ASDA'},
{value:6154,name:'SDA'},
{value:2154,name:'DA'},
{value:7154,name:'ASA'},
{value:9154,name:'DA'},
{value:4154,name:'A'},
{value:3154,name:'A'},
],
}]
};
mychart.setOption(option);-----释放数据显示图表