echarts基础知识点

一、定义

1. javascript的图表的库
2. 百度捐给apache基金会
3. 比较符合中国人习惯
4. HeightCharts,D3为其同行
5. 官网：https://echarts.apache.org/zh/index.html

二、核心概念

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

图表常用类型

bar 柱状

pie 饼状

        radius:["60%","40%"]

line 线性

        areaStyle 面

        smooth：true 平滑

 

颜色的改变

主题：自定义主题

        light,dark 浅色与深色

自定义主题：

        https://echarts.apache.org/zh/theme-builder.html

color:调色盘

color系列调色盘

itemStyle

        normal 默认

        emphasis 强调状态

特别样式

渐变

//渐变
var mycolor =  {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
				offset: 0, color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
			}, {
				offset: 1, color: 'rgba(85, 170, 255, 1.0)' // 100% 处的颜色
			}],
			global: false // 缺省为 false
}

线的样式lineStyle

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

}

面的样式

areaStyle:{
    color:linear2,
}

数据的堆叠 stack:true

label标签

 

多图表

grid网格布局

top/left/right/bottom

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: {}
			    }
},

 动画

事件监听

echart.on("click")

click.mouseover.mouseout,dbclick

事件发送

dispatchAction({
        //显示提示

        type:"showTip",

        //系列数据第0个

        seriesIndex:0,

        //data数据第3

        dataIndex:index,

        position:"top"

})

富文本

//格式b数据名，d百分比

formatter:"{bfb|{d}}{min|%}\n{b}",

rich：{

        bfb:{css样式}，

        min:{css样式}

}

地圆

虚拟映射

定义：通过数值来映射不同颜色

type:"continuous" 连续

        calculate：true  动态计算

        min：10，最小

        max:10,  最大

        color:[]    颜色

        show:false  是否显示控制条

 type:"piecewise" 分段类型

pieces:[]

min:1,max:20,color:"#eee",symbol:"circle"

最小，最大，颜色，符号

提示 tooltip

tooltip:{

        formatter(e){ }

}