echarts简介
- 百度开发团队制作,开源交个apache基金管理
- 制作图表的javascript库
- 同类型产品hightCharts D3
echarts步骤
1.将js文件下载至项目中
2. 初始化
var echart = echarts.init(dom节点,主题)
3. 定义选项option
const option = {
title标题
legend图例
color调试版本
tooltip提示
xAxis 轴线X
yAxis 轴线Y
series 系列数据
}
4. 更新选项
echart.setOption(option)
选项option
标题title
text 文本
title:{text:"地图"},
图例legend
图例,展现了不同系列的标记、颜色和名字
legend:{data:["成绩"]},
提示tooltip
鼠标划入时的提示
tooltip:{},
x轴线
{data:["x1","x2",...]}
y轴线
{data:["y1","y2",...]}
图表的类型type
1.柱状图
2.线
3.平滑线
4.面
5.饼状图
系列数据
bar柱状图
{
name:"名称",
type:"bar",
data:[10,{value:10}],
itemStyle:{color:xxx}
}
效果图
line线与smooth
{
type: "line",
data: [75, 80, 90, 60, 67],
name: "平均成绩",
smooth: true
},
其中smooth表示平滑的
效果图
pie饼状图
{
name:"名称",
type:"pie",
radius:["8%","23%"],
data:[{
name: "选择题",
value: 60},{
name:"填空题",
value:40},{
name: "简答题",
value: 20},{
name: "应用题",
value: 30}],
top: "-50%",
left: "30%"
}
效果图:
颜色样式控制
主题
默认:dark 深色 light 亮色
var echart = echarts.init(document.getElementById("container"),'light');
dark 深色
light 亮色
自定义主题
1.官网:主题编辑器 - Apache EChartshttps://echarts.apache.org/zh/theme-builder.html2.下载并引用 init(dom,“主题名称”)
调色板
color:[颜色数组]
itemStyle
1.具体数据:直接引用到具体数据中
data: [88, 90, 76, {value:50,itemStyle:{color:"pink"}}, 75],
效果
2.系列数据
itemStyle:{
normal:{color:"#b03611"},
emphasis:{color:"#f70"}
}
上面效果图可以看到除了2.6的数据柱状图为粉色,其他都为同一色
normal:{正常样式}
emphasis:{强调样式}
特殊样式
线
lineStyle:{width:"10px",cap:"round"}
10像素,cap端点 平滑
柱状图
itemStyle:{borderRadius:[100,100,100,100],}
borderRadius内部表示 圆角,左上,右上 ,右下,左下
渐变颜色
var mycolor1 = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(23, 135, 255, 1)' // 0% 处的颜色
}, {
offset: .7, color: 'rgba(27, 201, 249,1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
效果
堆叠图
{name:"ui",data:[],stack:true},
{name:"web",data:[],stack:true}
成品
富文本label
data:[
{value:120,name:"百度",label:{
show:true,
position:"center",
formatter:"{big|{d}}{small|%}\n{b}",
rich:{
big:{fontSize:"36px",fontWeight:900},
small:{fontSize:"12px",color:"#00aaff"}
}
}},
{value:25,name:"其他",label:{show:false}}
]
1.formatter:
{a} 系列名称
{b} 名称
{c} 值
{d} 百分百
2.position
"center","insideRight"中间 内部右侧
3.show:false 不显示
4.效果图
地图 map
图数据series
series:[
{name:"china",type:"map",mapType:"china",data:[]}
]
方法getMap
function getMap(obj={en:"china"}){
fetch("./json/province/"+obj.en+".json")
.then(res=>res.json())
.then(res=>{
echarts.registerMap(obj.en,res);
option.series[0].data=province;
option.series[0].mapType=obj.en;
echart.setOption(option);
})
}
更新option渲染
echart.setOption(option);
效果图