神秘的echarts用法

最新推荐文章于 2025-06-21 15:48:49 发布

原创最新推荐文章于 2025-06-21 15:48:49 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

echarts 专栏收录该内容

1 篇文章

订阅专栏

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);
 })
}