echarts的简单认知

最新推荐文章于 2023-03-15 20:02:50 发布

美食大战老鼠

最新推荐文章于 2023-03-15 20:02:50 发布

阅读量572

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Liu189364/article/details/121655054

版权

本文详细介绍了Echarts，一个JavaScript图表库，涵盖柱状图、饼图、线性图的使用，颜色和样式的自定义，数据堆叠、label标签设置，多图表布局，以及工具箱功能。通过实例演示了如何创建和个性化各类图表，并探讨了关键组件如实例、系列、提示、图例等的配置。

摘要由CSDN通过智能技术生成

echarts的定义及核心概览

定义

JavaScript的图表的库
HeightCharts，D3同行
比较符合我们的习惯

概览（基本流程）
instance 实例
series 系列
tooltip 提示
legend 图例
xAxis x轴
yAxis yz轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

图标的常用类型

bar（柱形）

series:[//名称，类型，数据
    {name:"人数",type:"bar",data:[1000,2000,3000,4000,5000]},
       ]

pie圆形

series:[
{name:"年龄分布",type:"pie",radius:["20%","10%"],left:"-50%",top:"-50%",data:[{name:"少年",value:6},{name:"青年",value:20},{name:"中年",value:50},{name:"老年",value:20}]}
]

line线性

series:[
{name:"人气",type:"line",smooth:true,areaStyle:{color:"#f70"},data:[1000,2000,1000,4000,3000]}
    ]

颜色的改变

主题

自定义主题

//light(浅色)   dark（深色）
var echart = echarts.init(document.getElementById("container"), 'chalk');

color调色盘
```
color: ["#f70", "#7f0", "#70f"],
```
itemStyle
normal 默认
emphasis 强制状态

特别样式

渐变

var mycolor =  {
	     type: 'linear',
	     x: 0,
	     y: 0,
	     x2: 0,
	     y2: 1,
	     colorStops: [{
	         offset: 0, color: 'aqua' // 0% 处的颜色
	     }, {
	         offset: 1, color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
	     }],
	     global: false // 缺省为 false
	 }

线的样式（lineStyle）

lineStyle{
width：12，
cap:"round",
opacity:0.7
}

面的样式
```
areaStyle{
color:liner
}
```

数据的堆叠

series:[
	    {name:"前端",type:"bar",data:[100,50,180],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}}
       ]

label标签

show:true（显示）
formatter:"{a}-{b}-{c}"
a 代表数据名
b 系列名
c 数字
position：
insideRight 内部右侧
top/right/left/botton、inside
color（颜色）

案例

{name:"UI",type:"bar",data:[200,100,80],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}}

多图表

grid（网格布局）
top/right/left/botton
height
width
xAxis、yAxis（轴线指定）
gridindex：0，
gridindex：1
series（数据指定轴线）
xAxisindex:0
yAxisindex:0

工具箱

toolbox: {
		     show: true,//提示
		     feature: {
		       dataZoom: {//缩放
		         yAxisIndex: 'none'
		       },
		       dataView: { readOnly: false },//数据视图，可编辑
		       magicType: { type: ['line', 'bar'] },//魔法类型
		       restore: {},//重置
		       saveAsImage: {}//保存图片
		     }
		   },