![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Echarts学习笔记
佛佛ง
前端
展开
-
动态改变echarts图表时,先销毁实例再创建图表,减少占用内内存
关键点:myChart.clear();//清空当前实例,会移除实例中所有的组件和图表myChart.dispose();//销毁实例,实例销毁后无法再被使用<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> <style> .change{ height: 50px; width: 1...原创 2021-11-18 17:42:43 · 4350 阅读 · 0 评论 -
饼状图,优化图例,颜色,引用的是echarts.js版本号5.2.2
var data = { name: ['0~1小时', '1~2小时', '2~5小时', '5~24时', '1天以上'], value: [1, 1, 1, 1, 1],};var colorArr=['#4572A7', '#AA4643', '#89A54E', '#71588F', '#4098AF', '#DB843D', '#93A9CF'];option = getOption(data, '辆','车流量',colorArr);function get...原创 2021-11-18 17:38:50 · 386 阅读 · 0 评论 -
设置双Y轴左右刻度线一致,柱形和折线混合开发
app.title = '折柱混合';function calMax(arr) { var max = arr[0]; for (var i = 1; i < arr.length; i++) { // 求出一组数组中的最大值 if (max < arr[i]) { max = arr[i]; } } var maxint = Math.ceil(max / 10); // 向上...原创 2021-11-18 17:27:37 · 665 阅读 · 0 评论 -
国庆一周收入折线图
1、x轴只显示首末日期,其他日期隐藏2、y轴数字在标线之上3、tooltip显示带单位的提示效果如下:var fontColor = '#DDDDDD'; //轴线的颜色var legendName = '国庆收入';var month = 10;var xData = [ '10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日'];var seriesData = [82000,原创 2021-10-19 21:21:25 · 178 阅读 · 0 评论 -
echarts多系列柱形图,鼠标悬浮在哪个柱子上显示哪个柱子的数据
源码下载地址:https://download.csdn.net/download/LzzMandy/19931741原创 2021-06-30 13:57:41 · 1360 阅读 · 1 评论 -
echart图表可以进行formatter的组件-tooltip、legend、xAxis.axisLabel、yAxis.axisLabel
1、tooltip中formatter返回的数据格式:返回系列中左右的数据样式设置如下: tooltip: { trigger: 'axis', formatter: (param)=> { console.log("param====",param) let name=param[0].name+"<br>"; let str="";原创 2021-03-02 18:26:18 · 2491 阅读 · 0 评论 -
echarts移除事件off
echarts绑定点击事件后,调试时,发现这样一个现象:1、第1次click,请求后台1次;2、第2次click,请求后台2次;3、第3次click,请求后台3次;如此循环。。。。请求后台的次数会增加,这是因为每次点击,没有移除上一次的click方法,因此,在进行点击之前,应该使用off("click")移除点击事件this.myChart = echarts.init(...原创 2019-11-07 10:12:26 · 8258 阅读 · 0 评论 -
当柱形图的柱子颜色渐变时,重新定柱形图的tooltip-formmatter
当柱形图的柱子颜色渐变时,marker取到的是[object object],因此,需要手动设置新的值option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'sh...原创 2019-11-05 13:59:31 · 383 阅读 · 0 评论 -
重新定柱形图的tooltip-formmatter,显示总数
功能简介:柱形图原本有formatter,重新定义新的formatter,增加总数显示项关键点:1、定义新函数formatterSum(params)用于展示总数项2、在option定义之后,对tooltip.formatter重新赋值源码: showEchart(){ let option=.... o...原创 2019-06-08 14:04:12 · 601 阅读 · 0 评论 -
Bar-1-柱形图的颜色根据预警值渐进变化
1、示例图2、源码var warningcolorValue=400;//根据预警值变化柱子的颜色,值设置option = { tooltip: { trigger: 'axis', formatter: '{b}:{c}人',//悬停显示数据单位 backgroundColor:'gray', ...原创 2018-05-02 13:45:09 · 1314 阅读 · 0 评论 -
设置柱状图柱子之间无缝隙显示
1、解决方法barCategoryGap用来设置类目间柱形距离,默认为类目间距的20%,可设固定值,调整这个值,可实现柱间距离2、源码var colorList_series1 = [ '#49af68', '#387fcf', '#f08d3d', '#36abb9' ]; var colorList_series2 = [ '#8bcc9f', '#6a9fdb', '#...原创 2018-01-05 16:42:25 · 9345 阅读 · 2 评论 -
设置柱状图每根柱子的颜色
1、解决方法①定义颜色组;②在series中设置color2、源码var colorList_series1 = [ '#49af68', '#387fcf', '#f08d3d', '#36abb9' ]; var colorList_series2 = [ '#8bcc9f', '#6a9fdb', '#f4aa6e', '#8cced7' ]; option = {...原创 2018-01-05 16:28:10 · 4082 阅读 · 0 评论 -
折线图-折线lineStyle从左到右渐变,areaStyle从左到右渐变
// 初始化设置var lens = 0;var series_data = [];var x_data = [];var help_data = []; //复制数组,用于显示第二个series系列var minData = 0;var legendName = '平均运行速度';series_data = [30, 20, 40, 20, 30, 20, 40, 3...原创 2018-12-12 20:01:48 · 8740 阅读 · 2 评论 -
折线图:series无数据时,连接折线断开
option = { grid:{ left:'40%', bottom:'50%', }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { ...原创 2018-09-05 15:07:00 · 3917 阅读 · 0 评论 -
折线图-多条趋势线展示,提示信息显示有值数据且重合点只显示实际值
// 带有预计的折线图,要实现的效果,鼠标悬浮在线上时,// 实际有值,只显示实际值,预计有值,只显示预计值,两者重合的点,显示实际值// 没有数据的用空代替,必须设置在某一个点数值重合,才能形成完整的曲线var actal1 = [1, 2, 3, 4, '', '', ''];var predict1 = ['', '', '', 4, 4, 4, 5];var actal2 ...原创 2018-07-30 15:06:12 · 4575 阅读 · 0 评论 -
折线图-完整预计曲线展示,提示信息显示有值数据且重合点只显示实际值
// 带有预计的折线图,要实现的效果,鼠标悬浮在线上时,// 实际有值,只显示实际值,预计有值,只显示预计值,两者重合的点,显示实际值// 没有数据的用空代替,必须设置在某一个点数值重合,才能形成完整的曲线var actal = [1, 2, 3, 4, '', '', ''];var predict = ['', '', '', 4, 4, 4, 5];option = {...原创 2018-07-30 14:26:26 · 2089 阅读 · 0 评论 -
堆积柱形图---当数据为0时不显示;但tooltip中显示带单位的数据0;tooltip中显示数据前面的小圆点
1、源码app.title = '堆叠柱状图';var data1=[120, 0.00, 101, 134];//含有0.00数据var data2=[0.00, 0.00, 191, 234];//含有0.00数据var change=function(arr){//当数据是0.00时,设置成空,则echarts不显示 var len=arr.length; ...原创 2018-07-10 14:54:40 · 3674 阅读 · 0 评论 -
柱形图:超过预警值,柱子颜色变化
var actualData = [17, 8, 9, 10, 16, 15, 7]; //实际值var warningData = [10, 10, 10, 10, 10, 10, 10]; //预警值option = { tooltip: { trigger: 'axis', }, legend: { data: ['实际值',...原创 2018-07-27 17:47:48 · 4487 阅读 · 2 评论 -
bar-渐变色柱形图,tooltip小标签显示渐变颜色
var legendData = ['A', 'B', 'C', 'D'];var xData = ['1', '2', '3', '4', '5'];var data1 = [10, 20, 30, 40, 50];var data2 = [11, 21, 31, 41, 51];var data3 = [12, 22, 32, 42, 52];var data4 = [13, ...原创 2018-11-15 21:31:34 · 1414 阅读 · 0 评论 -
刻度线和标签对齐
类目轴中在boundaryGap为true的时候有效,可以保证刻度线和标签对齐 xAxis: { type: 'category', axisTick:{ alignWithLabel:true }, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa...原创 2019-05-07 09:56:37 · 1424 阅读 · 0 评论 -
实际值、预测值、计划值、差值红色显示
实现效果:1、实际值和预测值在连接点,只显示实际值2、当预测值>计划值时,出现红色柱子,同时tooltip显示预测值、计划值和超计划值(超计划值=预测-计划)3、当预测值<=计划值时,不出现红色柱子,同时tooltip显示预测值、计划值和超计划值=0/*实际值和预测值在连接点,只显示实际值当预测值>计划值时,出现红色柱子,同时tooltip显示预测值、计划值和...原创 2018-11-16 17:56:42 · 1886 阅读 · 0 评论 -
tooltip线的样式设置
tooltip: { trigger: 'axis', axisPointer:{ type:'line', lineStyle:{ color:'#ffa147', width:2, ...原创 2018-11-16 16:21:35 · 1814 阅读 · 0 评论 -
折线和柱形综合图,渐变色,造成tooltip小标签颜色取值不按照series.color显示
折线和柱形综合图,均设置渐变色,此时tooltip小标签颜色取值不按照series.color显示1、series.color=[ 'red' , 'yellow' ],不设置渐变色,折线和柱子依次取值2、柱子设置渐变色后,柱子的tooltip小标签颜色取设置的渐变色;3、折线设置渐变色后,折线 线的颜色和tooltip小标签颜色 均取series.color的'red' ;折线和...原创 2018-11-14 18:19:28 · 1054 阅读 · 0 评论 -
zlevel分层,数值大的覆盖数值小的,默认为0
zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。zlevel大的 Canvas 会放在zlevel小的 Canvas 的上面。...原创 2018-11-10 13:08:50 · 3138 阅读 · 0 评论 -
X轴、Y轴label文字过长的四种处理方式
1、倾斜显示2、换行显示3、竖直显示4、隔两行显示5、源码var axisLabel1 = { // 方法1:倾斜显示 interval: 0, //强制全部显示,1表示隔一个;2隔两个 rotate: "45", //文字倾斜的角度};var axisLabel2 = { // 方法2:换行显示 interva...原创 2018-08-29 17:54:31 · 10437 阅读 · 2 评论 -
设置图例legend分行显示
1、解决方法:①在data处加入'',②如果文字较长可以截取部分缩略显示③分页显示2、源码及效果展示:第①种legend: { left: 'center', padding:[10,50], backgroundColor:'yellow', borderColor:'red', borderWidth:2, ...原创 2018-03-02 10:47:47 · 8769 阅读 · 0 评论 -
柱形图&饼图-格式化formatter
1、解决方法写formatter方法,params[*].name //x轴值params[*].seriesName //系列名称params[*].value //系列值2、给不同系列添加不同单位tooltip : { trigger: 'axis', formatter : function(params) { ...原创 2018-01-05 17:25:26 · 3124 阅读 · 0 评论 -
点击折线图上的拐点,拐点对应横坐标的文字变色
功能描述点击折线上的拐点,如点击绿色线“2019-5-4“的拐点,点击之后,横坐标处的文字变红色实现方法横坐标的颜色需要根据点击之后传递过来的值进行对比xAxis: { type: 'category', boundaryGap: true, axisLabel:{ show:true, textStyle : { col...原创 2019-05-07 16:21:27 · 1264 阅读 · 0 评论 -
echarts-横坐标是日期类时,显示最后一天
关键点:xAxis属性showMaxLabel:true,是否显示最大 tick 的 label。可取值true,false,null。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。var xdata=[];for(var i=0;i<30;i++){ xdata.push(getDay(i));}var sdata=...原创 2019-06-17 13:53:02 · 4796 阅读 · 1 评论 -
设置双Y轴左右刻度线一致
1、产生的原因splitNumber:需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。2、解决方法①求出一组数据的最大值max,这里设置最大值为10的倍数②根据最大值,设置interval3、源码app.title = '折柱混合';function calMax(arr) { var max...原创 2018-02-28 14:43:17 · 8786 阅读 · 3 评论 -
bar-上下渐变色柱形图,提示信息自定义显示
var x_data1 = ['0', '1', '2', '3', '4', '5', '6']; // 横坐标var jstr = [5, 6, 40, 100, 58, 99]; //进场数据var cstr = [36, 11, 22, 69, 115, 196]; //出场数据var option = { backgroundColor: '#8B4513', ...原创 2018-11-16 16:07:47 · 571 阅读 · 0 评论 -
Pie-1-南丁格尔玫瑰图-中心带文字
1、源码var data1=35;var data2=15;option = { backgroundColor:'#fff',//1、背景色和饼图块色一致,则能解决块之间间距问题 color:['#4f93df','#efa62e'], tooltip: { trigger: 'item', formatter: "{a} &...原创 2018-07-03 18:20:14 · 2343 阅读 · 0 评论 -
Pie-2-饼图中心带文字
1、代码app.title = '嵌套环形图';var data1=35;var data2=15;option = { backgroundColor:'#fff',//1、背景色和饼图块色一致,则能解决块之间间距问题 color:['#4f93df','#efa62e'], tooltip: { trigger: 'item', ...原创 2018-07-03 18:26:12 · 1295 阅读 · 0 评论 -
饼图-图例标记及文字的设置
1、源码app.title = '环形图';option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { left:250, top:40, width...原创 2018-07-12 11:02:08 · 5905 阅读 · 0 评论 -
bar-断开环形图
1、来源http://gallery.echartsjs.com/editor.html?c=xHkCjtI1Bm2、源码var scaleData = [{ //series data 'name': '工程建设', 'value': 10 }, { 'name': '产权交易', 'value':...转载 2018-08-20 17:02:09 · 909 阅读 · 0 评论 -
饼图-使用graphic饼图中间显示文字,label带边框和百分比
var midText = '多行显示的文字效果展示';var _midText = showFontNum(midText);var _value = [1, 2, 3, 4];var _name = ["深圳", "广州", "北京", "上海"];var _color = ['#a5be', '#5eccf8', 'pink', 'yellow'];var pieDat...原创 2018-12-07 15:16:16 · 5884 阅读 · 0 评论 -
饼图-图例显示百分比,label带边框和百分比
1、图例带百分比,显示在下方2、label带边框和百分比数据var copylegendName = ['A', 'AA', 'AAA', 'AAAA', 'AAAAA'];var copyrateArr = [1, 2, 2, 2, 2];var seriesData = [];for (var i = 0; i < copylegendName.length; i++...原创 2019-05-29 19:33:27 · 3717 阅读 · 0 评论 -
给图例加背景图片
1、解决方法legend中icon属性用来设置个性化图例。用法:icon:'image://图片路径'。2、源码 legend : { x : 453, y : 10, data: [ { name:'昨日', icon : 'image://./img/原创 2018-01-05 16:16:28 · 496 阅读 · 0 评论