帖子详情

ECharts笔记

jin.th 发布于2019-10-15 14:36 [评论区] [我要回复] [下载md文件] [下载pdf文件]

ECharts，是一个百度的纯 Javascript 的图表库，遵循 Apache-2.0 开源协议，免费商用，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。[官网地址](https://www.echartsjs.com/zh/index.html)

基本使用也很简单，引用js文件,为ECharts准备一个DOM 容器,通过`echarts.init`方法初始化一个 echarts 实例并通过 setOption 方法生成图表。
```javascript
<script src="echarts.min.js"></script>

var chart = echarts.init(document.getElementById('divChart'), 'dark');
chart.setOption(配置项)；
```
`echarts.init`的第二个参数是指定主题。

下面基于我用到过的图表类型，做一些配置项的记录
## 仪表盘
```JSON
{
    toolbox: {                          //工具栏。去掉这个节点就不显示了
        show: true,                     //是否显示工具栏组件
        feature: {                      //各工具配置项
            restore: {show: true},      //配置项还原
            saveAsImage: {show: true},  //保存为图片
            myTool1: {                  //自定义工具按钮,注意只能以 my 开头
                show: true,
                title: '自定义扩展方法',
                icon: 'image://http://echarts.baidu.com/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler1')
                }
            }
        }
    },
    series : [                          //系列列表。每个子项通过 type 决定自己的图表类型。如果有多个子项表示有多个图表
        {
            name: '速度',               //名称，用于tooltip的显示
            type: 'gauge',              //固定值，表示仪表盘
            z: 3,                       //series有多个子项时有用。当前图表的zIndex值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
            min: 0,                     //仪表盘的最小的数据值。如果不指定，则默认为0
            max: 220,                   //仪表盘的最大的数据值。如果不指定，则默认为100
            splitNumber: 11,            //仪表盘大刻度的分割段数，每段会显示1个值。可查看gauge_splitNumber示例
            center: ["45%", "45%"],     //圆心的坐标位置，分别表示横坐标与纵坐标。也可以设置成绝对像素值比如center: [400, 300]
            radius: '80%',              //仪表盘半径，表示相对于容器高宽中较小的一项的一半的百分比。也可以设置成绝对像素值比如radius: 300。可查看gauge_radius示例
            axisLine: {                 //仪表盘轴线相关配置
                show:true,              //是否显示仪表盘轴线
                lineStyle: {            //仪表盘轴线样式
                    width: 10,          //仪表盘轴线粗细,默认30。可查看gauge_axisLine_lineStyle_width示例
                    color:[[0.2, 'yellow'], [0.8, '#0ff'], [1, '#c23531']]    //仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。可查看gauge_axisLine_lineStyle_color示例
                }
            },
            axisTick: {            //仪表盘小刻度线相关配置。可查看gauge_axisTick示例
                length: 15,        //刻度线的长度
				splitNumber:5,     //大刻度线之间分割的小刻度数量
                lineStyle: {       //刻度线的线条样式
					width: 2,      //刻度线粗细，默认1
                    color: 'auto'  //简单的就设置auto 或者 指定1种颜色 或者 不设置该属性默认取#eee即可(貌似不能设置颜色的数组)，复杂的渐变参看官方文档，我没弄明白
                }
            },
            splitLine: {           //仪表盘大刻度分隔线相关配置。可查看gauge_splitLine示例
                length: 20,        //分隔线的长度
                lineStyle: {       //分隔线的线条样式
					width:5,	   //分隔线粗细，默认2
                    color: 'auto', //简单的就设置auto 或者 指定1种颜色 或者 不设置该属性默认取#eee即可(貌似不能设置颜色的数组)，复杂的渐变参看官方文档，我没弄明白
					type:"solid"   //线条类型，有solid/dashed/dotted三种可选
                }
            },
            axisLabel: {                 //仪表盘刻度标签相关配置。可查看gauge_axisLabel示例
			    distance: 8,             //刻度标签与刻度线的距离，默认5
                backgroundColor: 'auto', //刻度标签的背景色，auto表示自动按照表盘颜色
                borderRadius: 2,         //圆角读数，越大越园
                color: '#eee',           //刻度标签上文本的颜色
                padding: 3,              //刻度标签上文本的内间距,可设置数组分别表示[上,右,下,左]的边距
                textShadowBlur: 2,       //文字本身的阴影长度
                textShadowOffsetX: 1,    //文字本身的阴影 X 偏移
                textShadowOffsetY: 1,    //文字本身的阴影 Y 偏移
                textShadowColor: '#222'  //文字本身的阴影颜色
            },
            title : {                       //仪表盘标题配置，即data\name。可查看gauge_title示例
			    offsetCenter:["30%","-20%"],//相对于仪表盘中心的偏移位置，可以是绝对数值也可以是相对于仪表盘半径的百分比。
                fontWeight: 'bolder',		//文字字体的粗细
				color:'black',				//文字颜色
                fontSize: 20,               //文字的字体大小
                fontStyle: 'italic',        //文字字体的风格
				backgroundColor:'red',		//文字块背景色,默认为transparent透明，支持图片。
            },
            detail : {						   //仪表盘详情，用于显示当前值。可查看gauge_detail示例
                formatter: function (value) {  //格式化函数或者字符串，这段函数的意思是将数值格式化为XX.XX
                    value = (value + '').split('.');
                    value.length < 2 && (value.push('00'));
                    return ('00' + value[0]).slice(-2)
                        + '.' + (value[1] + '00').slice(0, 2);
                },
                fontWeight: 'bolder',			//文字字体的粗细
                borderRadius: 3,				//文字块的圆角
                backgroundColor: '#444',		//背景色
                borderColor: '#aaa',			//边框颜色
                shadowBlur: 5,					//背景阴影长度
                shadowColor: '#333',			//背景阴影颜色
                shadowOffsetX: 0,				//背景阴影 X 偏移
                shadowOffsetY: 3,				//背景阴影 Y 偏移
                borderWidth: 2,					//边框宽度
                textBorderColor: '#000',		//文字本身的描边颜色
                textBorderWidth: 2,				//文字本身的描边宽度
                textShadowBlur: 2,				//文字本身的阴影长度
                textShadowColor: '#fff',		//文字本身的阴影颜色
                textShadowOffsetX: 0,			//文字本身的阴影 X 偏移
                textShadowOffsetY: 0,			//文字本身的阴影 Y 偏移
                fontFamily: 'Arial',			//文字的字体系列
                width: 100,						//文字块的宽度
                color: '#eee',					//文字的颜色
                rich: {}						//自定义富文本样式
            },
            data:[{value: 40, name: 'km/h'},{value: 20, name: 'km/h',tooltip : {formatter: "呵呵{a} <br />{c} {b}呵呵"}}]	//数据内容数组，如果设置了多组就可以显示多条指针，还可以为每组数据单独设置tooltip与itemStyle
        }
    ],
    tooltip : {							//鼠标移到指针上时的提示框设置
        formatter: "{a} <br />{c}<br /> {b}"	//提示信息格式化，{a}（系列名称,series\name），{b}（数据项名称，series\data\name），{c}（数值，series\data\value）
    },
}
```
<a href='javascript:layer.open({type: 2,title: "仪表盘gauge splitNumber示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_splitNumber"});'>gauge_splitNumber示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge radius示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_radius"});'>gauge_radius示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge axisLine\lineStyle\width示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_axisLine_lineStyle_width"});'>gauge_axisLine_lineStyle_width示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge axisLine\lineStyle\color示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_axisLine_lineStyle_color"});'>gauge_axisLine_lineStyle_color示例</a>
<a href='javascript:layer.open({type: 2,title: "仪表盘gauge axisTick示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_axisTick"});'>gauge_axisTick示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge splitLine示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_splitLine"});'>gauge_splitLine示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge axisLabel示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_axisLabel"});'>gauge_axisLabel示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge title示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_title"});'>gauge_title示例</a>  <a href='javascript:layer.open({type: 2,title: "仪表盘gauge detail示例",fix: true,shadeClose: false,maxmin: true,area: ["800px", "600px"],content: "PopWindow/EchartsSample.aspx?key=gauge_detail"});'>gauge_detail示例</a>

评论列表

回帖