Echarts 数据可视化

目录

一、定义
二、核心展览
三、图标常用类型
四、颜色的修改
五、特别样式
六、数据的堆叠
七、label 标签
八、工具箱

一、定义

1、JavaScript的图表的库
2、百度捐给Apache基金会
3、比较符合中国人习惯
4、与HeightCharts，D3为同行
官网：Apache ECharts

二、核心概览

instance	实例
series	系列
tooltip	提示
legend	图例
xAxis	x轴
yAxis	y轴
toolbox	工具箱
dataZoom	缩放
vitualMap	虚拟映射

三、图标常用类型

bar 柱形

pie 饼形
radius：["60%","40%"]

line 线性
areaStyle 面
smooth：true 平滑

    // 初始化echart实例
	var echart=echarts.init(document.getElementById("container"));
	// 定义选项
	var option={
		// 标题
		title:{text:"前端大讲堂数据"},
		// 鼠标提示
		tooltip:{},
		// 图例
		lengend:{data:["人数","人气","年龄分布"]},
		// x轴线
		xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
		// y轴线
		yAxis:{},
		// 系列数据
		series:[
			// 名称：name，类型：柱状图，数据：data
			{name:"人数",type:"bar",data:[1000,800,500,900,1300]},
			// areaStyle:{color:"#f70";}面积区域
            // 名称：name，类型：线性图，数据：data
			{name:"人气",type:"line",smooth:true,data:[1400,1350,1500,1380,1600]},
            // 名称：name，类型：饼状图，数据：data
			{name:"年龄分布",type:"pie",radius:["20%","10%"],//left:"-62%",top:"-48%",
			data:[
				{name:"少年",value:20},
				{name:"青年",value:38},
				{name:"中年",value:30},
				{name:"老年",value:18},
			]}
		]
	};
	// 设置参数
	echart.setOption(option);

四、颜色的修改

主题：自定义主题 ，light，dark浅色与深色
自定义主题：主题编辑器 - Apache ECharts

color：调色板

color系列调色盘

itemStyle
normal默认
emphasis强调状态

五、特别样式

渐变
 

var linear={
    type:'linear',
    x:0,
    y:0,
    x2:0,
    y2:1,
    colorStops:[{
        offset:0,color:'#0bdcf3' //0%处的颜色
    },{
        offset:1,color:'#0093dd' //100%处的颜色
    }],
    global:false // 缺省为false
}

线的样式 lineStyle

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

面的样式

areaStyle:{
    color:linear2,
}

六、数据的堆叠

stack：true

        var echart = echarts.init(document.getElementById("container"), "dark");
			var option = {
				title: {text: "堆叠图"},
				lengend: {data: ["前端","UI","Python"]},
				tooltip: {
					trigger:"item"
				},
				xAxis: {},
				yAxis: {data: ["2019", "2020", "2021"]},
				series: [
			{name: "前端",type:"bar",data: [100,50,80],stack:true,label: {show:true,position:"insideRight",formatter:"{a}{c}人"}},
			{name: "UI",type:"bar",data: [200,150,130],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
			{name: "Python",type:"bar",data: [140,60,90],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}}
				]
			};
			echart.setOption(option);

七、label 标签

show：true 是否显示

formatter："{a}{b}{c}"格式化 
a代表数据名
b代表系列名
c代表数字

position：位置
insideRight 内部右侧
top/left/right/bottom/inside

color 颜色

八、工具箱

toolbox:{
    show:true, //显示工具箱
    feature:{
    // 缩放
        dataZoom:{
            yAxisIndex:'none'
        },
    // 数据视图
        dataView:{readOnly:false},
    // 魔法类型
        magicType:{type:['line','bar','pie']},
    // 重置
        restore:{},
    // 保持图片
        saveAslmage:{}