echarts
echarts
monstkl
小白
展开
-
echarts---legend
前言图例组件会自动根据对应的系列的图形标记symbol来绘制自己的颜色和标记;一、legend的子配置项// 1、type 图例的类型可选值:'plain' ---普通图例 'scroll' ---可滚动翻页的图例// 2、data (Array[object])// 如果data项没有指定,会自动从当前系列中获取// 如果要重新设置几项图例的样式,就需要具体如下设置datadata: [ { name: '', // 此name要和系原创 2022-05-23 22:58:13 · 354 阅读 · 0 评论 -
echarts---series
一、series (Array[object])// 1、type 指定图表的类型// 2、name 指定系列的名称,用于tooltip中的显示和legend图例筛选// 3、symbol 标记的图形,用于legend的标记预定义值:circle、rectbase64格式的图片:'image://data:image/gif;base64,xxxxxxxxxxx'// 4、data (Array[object]) 当前系列的一组数据data: [ { .原创 2022-05-23 22:41:30 · 2215 阅读 · 0 评论 -
echart开发总结
1、图表开发先实用模拟数据调样式,然后再请求数据。不要用请求来的数据调样式,这样很费事原创 2022-03-14 16:50:33 · 186 阅读 · 0 评论 -
echart封装的一般流程
data: uuid:null, myChart:nullprops: chartData(包含xAxiaData和seriesData等)watch: chartData(){ updateEchart() }methods: initEchart(){} updateEchart(){} screenAdapter(){}created: uuid = 随机数+时间戳生成mounted: init.原创 2021-10-25 08:10:56 · 294 阅读 · 1 评论 -
颜色渐变(柱子、圆环等)
series:[ { itemStyle:{ color: new echarts.graphic.LinearGradient(0,0,0,1,[ {offset:0,color:'red'}, {offset:1,color:'green'} ])左上(0,0)右上(1,0)左下(0,1)右下(1,1)...原创 2021-10-26 00:01:34 · 61 阅读 · 0 评论 -
echarts---tooltip
一、前提series[0].data中每一项有很多信息name和value是必须的,同时也可以有我们自定义的keyseries:[ { name:'', value:'', xxx:myData原创 2021-10-25 23:33:18 · 1711 阅读 · 0 评论 -
echart常见的配置项(线、区域、文本)
坐标轴轴线相关--axisLine(里面可以配置线的相关样式)坐标轴刻度--axisTick(里面可以配置刻度线的样式)坐标轴刻度标签--axisLabel(里面可以配置标签文本的样式)坐标轴在grid区域中的分割线--splitLine(可以是实线,可以是虚线)坐标轴在grid区域中的分隔区域--splitArea...原创 2021-10-25 08:27:15 · 277 阅读 · 0 评论 -
echarts直角坐标系
前言直角坐标的图表有:折线图、柱状图、散点图一、grid网格x轴和y轴是基于grid绘制的控制图表的位置和大小二、axis(x和y)一个grid中最多有两种位置的x轴和y轴1、类型type(category)要配合data实现类目轴type(value)会自动识别series中的data2、位置x轴:top、bottomy轴:left、right三、dataZoom区域缩放x轴和y轴都可以有dataZoomdataZoom是一个数组,意味着可以有多原创 2021-10-19 23:52:58 · 915 阅读 · 0 评论 -
echarts直接样式和高亮样式
一、直接样式itemStyle、textStyle、lineStyle、areaStyle、label二、高亮样式在emphasis下包裹itemStyle、textStyle、lineStyle、areaStyle、label原创 2021-10-09 00:29:16 · 371 阅读 · 0 评论 -
echarts的调色盘
前言调色盘就是一组颜色,图形和系列会自动从中选取颜色;调色盘的作用遵循就近原则:局部》全局》主题一、主题调色盘echarts.registerTheme('itcast',{ 'color':[ '#2fa39e', '#951acf', '#33fb5d' ]})二、全局调色盘option = { color:['red','green','dark']}三、局部调色盘series:[{原创 2021-10-09 00:23:39 · 1177 阅读 · 1 评论 -
echarts主题使用
一、内置主题dark、light二、自定义主题1、在主题编辑器中编辑主题2、下载主题,是一个js文件3、引入主题js文件4、echarts.init(dom,主题)原创 2021-10-09 00:07:02 · 347 阅读 · 0 评论 -
echart实例对象的方法
一、setOption可以调用多次,多次之间不是覆盖关系,而是相互整合的;所以在第一次之后的setOption,只需要考虑变化的部分二、resize图表自适应使用,一般结合window对象的resize事件使用//window.onresize = function(){// mchart.resize()//}window.onresize = mchart.resize三、on/off绑定或者解绑事件(鼠标事件、echarts事件)处理函数//鼠标事件mch原创 2021-10-09 00:00:18 · 306 阅读 · 0 评论 -
echarts全局对象方法
前言全局对象是引入echarts的js文件后就直接能用的全局变量echarts一、echarts.init(dom,主题)初始化echart实例、使用某套主题二、echarts.registerThemeecharts.registerTheme('itcast',{...})let mChart = echarts.init(dom,'itcast)三、echarts.registerMap注册地图矢量数据$.get('json/map/chinaJson',func原创 2021-10-08 23:34:04 · 541 阅读 · 0 评论 -
仪表盘实现
一、适用场景主要用在进度把控以及数据范围的检测二、基本实现1、指定类型2、准备数据series:[{ type:'gauge', data:[ {value:96} ]三、常见效果1、数据范围series:[{ type:'', min:50, max:902、多个指针series:[{ data:[ {value:97,itemStyle:{}}, {val原创 2021-10-05 21:57:40 · 108 阅读 · 0 评论 -
雷达图实现
一、实用场景两款手机在易用性、拍照、跑分、续航、功能等多个维度的打分二、基本实现1、图表类型2、定义各个维度的最大值3、准备具体产品的数据let dataMax = [ {name:'易用性',max:100}, {name:'拍照',max:90}, ...]radar:{ indicator:dataMax},series:[{ type:'radar', data:[ {name:'华为手机',value原创 2021-10-05 21:49:45 · 149 阅读 · 0 评论 -
地图的实现
一、使用方式1、百度地图API(需要申请百度地图ak)2、矢量地图(需要准备矢量地图数据)(实现第二种如下)二、基本实现1、准备矢量地图json文件china.json2、使用ajax获取china.json$.get('json/map/china.json',function(chinaJson){})3、在成功回调中往echarts全局对象注册地图json数据echarts.registerMap('chinaMap',chinaJson)4、geo设置(geo原创 2021-10-05 11:26:44 · 674 阅读 · 0 评论 -
饼图的实现
一、基本实现(不需要直角坐标系)1、数据准备series:[{ type: 'pie', data:[ {name:'淘宝',value:1123}, {name:'京东',value:656}, {name:'唯品会',value:1634} ]2、图表类型series:[{ type: 'pie'二、常见效果1、显示数值series:[{ label:{//饼图文字的显示原创 2021-10-04 23:55:31 · 238 阅读 · 0 评论 -
散点图实现
一、场景散点图可以帮助我们推断出变量间的相关性(如身高和体重之间的关系)二、基本实现1、x轴数据和y轴数据:二维数组[身高1,体重1],[身高2,体重2]2、图表类型在series下,设置type为scatterxAxis和yAxis的type都设置为value三、常见效果1、气泡图效果(散点大小和颜色不同)series:[{ type:'scatter', symbolSize:function(arg){ let height =原创 2021-10-04 23:27:16 · 321 阅读 · 0 评论 -
折线图实现
一、基本实现1、x轴数据2、y轴数据3、图标类型二、常见效果1、标注区间(通过阴影面积标注出区间)series:[{ markArea:{ data:[ [ { xAxis:'1月' }, { xAxis:'2月' }原创 2021-10-02 08:59:17 · 68 阅读 · 0 评论 -
柱状图实现
一、基本实现1、x轴数据xAxis:{ type:'category', data:[]2、y轴数据series:[ { name:'语文', data:[]3、图表类型series:[ { name: '语文', type: 'bar'二、常见效果1、最大值,最小值,平均值series:[ { type:'bar', markP原创 2021-09-30 23:59:08 · 420 阅读 · 0 评论 -
echart---toolbox
一、title二、tooltip1、触发类型triggeritem、axis2、触发方式triggerOnmouseover、click3、formatter字符串、回调函数三、toolbox(内置工具栏)1、导出图片feature.saveAsImage2、数据视图feature.dataView可以呈现原始数据、并进行修改数据看效果3、重置(配合数据视图使用)feature.restore4、区域缩放(选出某一小部分区域查看)featu原创 2021-09-26 23:30:58 · 557 阅读 · 0 评论 -
dataZoom配置
概述:用于直角坐标系下数据区间的缩放type:有inside和slider两种,slider是可见滚动条的那种样式相关的属性:x,y,width,height,backgourndcolor,handleSize等orient(布局方式是横还是竖的,slider那种情况,就是滚动条是横还是竖,跟类目轴方式保持一致最好)start和end:数据窗口范围的起始和结束位置的百分比(默认是0%-100%)zoomLock:其值为true时,只允许平移,不允许缩放,就是说不允许原创 2020-10-19 23:08:01 · 1509 阅读 · 0 评论 -
echart地图
//1,2,3,4是显示地图的基础步骤let mapJson = require('../../json/china.json') -->1echarts.registerMap('anyName',mapJson) -->2series:[ { type:'map', -->3 mapType:'anyName', -->4 nameMap:{//地图的自定义名称映射 'BJ':'...原创 2020-12-08 23:03:57 · 219 阅读 · 0 评论