HerayChen

echarts学习之踩坑笔记

常用的配置模块有：series，xAxis，yAxis，grid，tooltip，title，legend，color。

1. title（标题）

option = {
  title: {
    text: "Main Title",
    subtext: "副标题",
    left: "center",
    top: "11%",
    textStyle: {
      fontSize: 30,
      fontWeight: "bold",
      lineHeight: 50
    },
    subtextStyle: {
      fontSize: 20,
      color: "rgba(255, 0, 0, 1)",
      verticalAlign: "middle"
    },
    show: true,
    padding: [12, 10, 6, 4],
    itemGap: 20,
    right: "2%"
  }
}

2.legend（图例列表）

option = {
  color: ["#003366", "#006699", "#4cabce", "#e5323e"],
  dataset: {
    source: [
      ["type", "2012", "2013", "2014", "2015", "2016"],
      ["Forest", 320, 332, 301, 334, 390],
      ["Steppe", 220, 182, 191, 234, 290],
      ["Desert", 150, 232, 201, 154, 190],
      ["Wetland", 98, 77, 101, 99, 40]
    ]
  },
  legend: {
    left: "27%",
    top: "0%",
    orient: "horizontal",
    align: "right",
    itemGap: 20,
    itemHeight: 18,
    selectedMode: true,
    inactiveColor: "rgba(255, 223, 223, 1)",
    textStyle: {
      color: "rgba(213, 33, 33, 1)",
      fontStyle: "italic",
      fontWeight: "bold",
      padding: [3, 3, 3, 3]
    },
    pageTextStyle: {
      color: null
    },
    animation: false,
    selectorLabel: {
      show: false
    }
  },
  xAxis: {
    type: "category",
    axisTick: {
      show: false
    }
  },
  yAxis: {},
  series: [{
    type: "bar",
    seriesLayoutBy: "row"
  }, {
    type: "bar",
    seriesLayoutBy: "row"
  }, {
    type: "bar",
    seriesLayoutBy: "row"
  }, {
    type: "bar",
    seriesLayoutBy: "row"
  }]
}

3. grid(是否显示网格)

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    show: true,
    left: "15%",
    top: "20%",
    right: "11%",
    width: "60%",
    height: "50%",
    containLabel: false,
    backgroundColor: "rgba(254, 0, 0, 1)",
    borderWidth: 2.5,
    borderColor: "rgba(123, 244, 3, 1)",
    tooltip: {
      show: true,	// 是否显示提示框（鼠标移上去显示数据）
      padding: [4, 4, 4, 4]
    }
  },
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisTick: {
      alignWithLabel: true
    }
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

4. xAxis（x轴）【y轴一样】

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    show: true,
    position: "bottom",
    name: "星期",
    nameLocation: "end",
    nameTextStyle: {
      color: "rgba(235, 39, 39, 1)",
      fontWeight: "bold",
      fontSize: 16,
      align: "left",
      padding: [14, 14, 14, 14]
    },
    nameGap: 12,
    nameRotate: 50,
    inverse: false,
    minInterval: 1,
    axisLine: {
      show: true,
      onZero: true,
      symbolSize: [9, 15]
    },
    axisTick: {
      show: true,
      alignWithLabel: true
    },
    minorTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontWeight: "bold",
      fontStyle: "italic",
      fontSize: 14
    },
    splitLine: {
      show: true
    },
    minorSplitLine: {
      show: false
    },
    splitArea: {
      show: true
    },
    axisPointer: {
      show: true
    }
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

5. series系列列表（通过type决定图表的类型）
常用的有：折线图，柱状图，饼图

————————————分割线——————————————
ECharts使用五步曲：

下载并引入echarts.js库（图表依赖这个js库）

npm i echarts --save

<script src="/echarts.min.js"></script>

准备一个具备大小的容器（生成的图标会放入这个容器内）

<style>
	.box {
		width: 100px;
		height: 100px;
	}
style>
<div class="box">div>

初始化echarts实例化对象（实例化echarts对象）

<script>
	// 初始化实例对象  echarts.init(dom容器)
	let myCharts = echarts.init(document.querySelector(".box"));
</script>

指定配置项和数据（根据具体需求修改配置项选项）

option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

将配置项设置给echarts实例对象（让echarts根据修改好的配置项生效）

myCharts.setOption(option);

——————————————————————实例分享—————————————

折线图

cpuOption = {
        title: {
            text: 'CPU负载',
            left: 'center'
        },
        tooltip: {
            // 鼠标移上去显示数据(x轴和series中都有data数据才会出现)
            trigger: 'axis'
        },
        xAxis: {
            // 数值轴，适用于连续数据
            type: 'category',
            name: '60秒',
            // x轴名称距离轴线的距离
            nameGap: 6,
            // 坐标轴两边是否留有空白（线性图一般不需要留有空白，柱状图才会需要留有空白）
            boundaryGap: false,
            axisLabel: {
                // 是否显示X轴值
                show: false
            },
            axisTick: {
                // 是否显示X轴刻度（小锯齿）
                show: false
            },
            data: ['07-30', '07-31', '08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15', '08-16', '08-17', '08-18', '08-19', '08-20', '08-21', '08-22', '08-23', '08-24', '08-25', '08-26', '08-27', '08-28', '08-29', '08-30', '08-31', '09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07', '09-08', '09-09', '09-10', '09-11', '09-12', '09-13', '09-14', '09-15', '09-16', '09-17', '09-18', '09-19', '09-20', '09-21', '09-22', '09-23', '09-24', '09-25', '09-26', '09-27', '09-28', '09-29', '09-30'],
        },
        yAxis: {
            type: 'value',
            name: '%利用率',
            axisLine: {
                // 是否显示Y轴轴线
                show: true
            },
        },
        series: [{
            // 指定数据类型 （线性图）
            type: 'line',
            // tslint:disable-next-line:max-line-length
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 90, 4, 4, 3, 0, 3, 5, 1, 2, 1, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 1, 1]
        }]
    };

网格图

cpuOption = {
        xAxis: {
            type: 'category',
            name: '60秒',
            nameLocation: 'start',
            data: [100, 500, 1000, 1500, 2000, 2500],
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#7db6d8'],
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#7db6d8'
                },
                onZero: true
            }
        },
        yAxis: {
            type: 'value',
            name: '%利用率',
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#7db6d8'],
                    width: 1,
                    type: 'solid'
                }
            },
            axisLabel: {
                show: false
            }
        },
        series: [{
            data: [0, 50, 30, 20, 40, 50, 800, 50, 0],
            type: 'line',
            symbol: 'none',
            areaStyle: {
                normal: {
                    color: '#eff4f9'
                }
            },
            lineStyle: {
                color: ['#7db6d8'],
            }
        }],
        title: [{
            left: 'center',
            text: 'CPU负载'
        }]
    }

指示线

this.voltageUnbalanceOptions2 = {
          color: ['#1fbda6', '#ffdb14', '#de685f'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          legend: {
              data: ['电压不平衡度'],
          },
          grid: {
              top: '14%',
              left: '3%',
              right: '4%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  data: ['00:00', '06:00', '04:00', '08:00', '09:00']
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '%',
                  axisLine: {
                      show: true
                  },
                  axisTick: {
                      show: true
                  }
              }
          ],
          series: [
              {
                  name: '电压不平衡度',
                  type: 'line',
                  stack: '总量',
                  data: [2, 12, 11, 24, 16, 30],
                  // 添加指示线及指示线的文字
                  markLine: {
                      data: [
                          {yAxis: 30, lineStyle: {color: '#fc5554'}, label: { formatter: '严重三相不平衡', position: 'middle', color: '#fc5554'}},
                          {yAxis: 15, lineStyle: {color: '#ffbc02'}, label: { formatter: '严重三相不平衡', position: 'middle', color: '#ffbc02'}}
                      ]
                  },
              }
          ]
      };

柱状图颜色渐变，自定义tooltip颜色

this.archiveCylindricalOptions = {
      tooltip: {
          show: true,
          // 自定义tooltip内容
          formatter: (params) => {
              return ''  + params.name + ' 
 ' + '案件数:  ' + params.value + '
';
          }
      },
      xAxis: {
          type: 'category',
          data: this.monthDay,
          axisLine: {
              show: false,
          },
          axisTick: {
              show: false,
          },
          axisLabel: {
              color: 'rgba(255, 255, 255, 0.45)',
          },
      },
      yAxis: {
          minInterval: 1,
          type: 'value',
          splitLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(255, 255, 255, 0.15)',
                  width: 1,
                  type: 'solid',
              },
          },
          axisLabel: {
              color: 'rgba(255, 255, 255, 0.45)',
          },
      },
      grid: {
          top: 8,
      },
      series: [{
          data: this.monthArchiveCount,
          type: 'bar',
          // 柱状图颜色渐变
          itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,   // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                  [
                      {offset: 1, color: 'rgba(86, 196, 240, 0)'},
                      {offset: 0, color: '#56C4F0'},
                  ],
              ),
          },
      }],
  };

饼图基本配置

{
            title: {
                text: '共计回路',
                subtext: '234',
                top: '45%',
                left: 'center'
            },
            legend: {
                top: 'bottom'
            },
            color: ['#1fbda6', '#f5b416', '#e55d41'],
            series: [
                {
                    name: '回路统计',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['50%', '50%'],
                    labelLine: {
                        length: 45
                    },
                    data: [
                        {value: 62, name: '优秀'},
                        {value: 151, name: '合格'},
                        {value: 19, name: '不合格'}
                    ]
                }
            ]
        }

echarts图表加载动画

图表加载动画不显示或者图表加载动画只显示一部分

 <div echarts id="deviceTotal" [options]="deviceEchartsOptions" [loading]="true">div>

import * as echarts from 'echarts';
import {EChartsOption} from 'echarts';

const archiveCylindricalOptions = {
    tooltip: {
        show: true,
        // 自定义tooltip内容
        formatter: (params) => {
            return '' + params.name + ' 
 ' + '案件数:  ' + params.value + '
';
        }
    },
    xAxis: {
        type: 'category',
        data: this.monthDay,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: 'rgba(255, 255, 255, 0.45)',
        },
    },
    yAxis: {
        minInterval: 1,
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.15)',
                width: 1,
                type: 'solid',
            },
        },
        axisLabel: {
            color: 'rgba(255, 255, 255, 0.45)',
        },
    },
    grid: {
        top: 8,
    },
    series: [{
        data: this.monthArchiveCount,
        type: 'bar',
        // 柱状图颜色渐变
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,   // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                [
                    {offset: 1, color: 'rgba(86, 196, 240, 0)'},
                    {offset: 0, color: '#56C4F0'},
                ],
            ),
        },
    }],
    // 配置图表加载的动画
    // 动画加载时长
    animationDuration: 3000,
    // 动画效果
    animationEasing: 'cubicInOut'
};
this.drawEchart(archiveCylindricalOptions, 'ststisticsDetails');
        
 // 绘制图表（适用于柱状图和折线图，饼图自适应浏览器时， 在setOption之前添加 window.onresize = pieRiskTrend.resize; 就可以了）
 drawEchart(option: any, id: string): void {
     setTimeout(() => {
         if (document.getElementById(id)) {
             const echart = echarts.init(document.getElementById(id));
             // 每次重绘之前，先清除一下，避免加载时动画不显示
             echart.clear();
             echart.setOption(option);
             // 图表自适应
             window.addEventListener('resize', () => {
                 echart.resize();
             });
         }
     }, 100);
 }

饼图自定义label样式

 series: [
     {
         name: '项目类别',
         type: 'pie',
         // 饼图大小
         radius: [80, 50],
         // 图形外文字线
         labelLine: {
             normal: {
                 length: 60
             }
         },
         data: [
             [],
         ],
         label: {
             normal: {
                 formatter: ' {b} \n\n {c}  \n\n',
                 textStyle: {
                     rich: {
                         // name 的文字样式
                         b: {
                             color: '#333',
                         },
                         // value 的文字样式
                         c: {
                             color: '#FF0404'
                         }
                     }
                 }
             },
         },
         emphasis: {
             itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
         }
     }
 ]

饼图处理多条数据

当图表数据过多时图例会显示很多,可以给其设置分页显示(其他图表设置方法相同) 属性:legend

legend: {
     orient: 'horizontal',
     bottom: 'bottom',
     type: 'scroll'
 },

没处理之前：

处理之后：

饼图实现一下效果

背景图：

<template>
    <div id="alarmPane" class="circle">div>
template>

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import * as echarts from "echarts";

@Options({
    components: {}
})
export default class AlarmPane extends Vue {
    mounted(): void {
        this.drawWeekOnYear();
    }

    drawWeekOnYear(){
        // 获取echarts操作的画布
        let weekOnYear = echarts.init(document.getElementById("alarmPane"));
        // 给画布添加图表数据
        weekOnYear.setOption( {
            tooltip: {
                show: false
            },
            title: {
                text: '78%',
                top: '40%',
                left: 'center',
                textStyle: {
                    color: '#30BF78',
                }
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['70%', '80%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        borderRadius: 50,
                    },
                    label: {
                        show: false
                    },
                    color: ['#30BF78', '#00514a'],
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                    ]
                }
            ]
        });
        // 图表自适应（屏幕缩放图表不变形）
        window.addEventListener('resize', () => {
            weekOnYear.resize();
        });
    }
}
script>

<style lang="less" scoped>
.circle {
    margin: 0 auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    text-align: center;
    line-height: 140px;
    background: url("../../assets/imgs/complete.png") no-repeat;
    background-size: cover;
}
style>

echarts 饼图每块之间添加边框

实现以下效果：

配置代码：

let chartOption = {
    legend: {
        icon: 'circle',
        right: '0',
        top: 'center',
        orient: 'vertical',
        textStyle: {
            color: '#fff'
        },
        // 去除legend边框
        itemStyle: {
            borderWidth: 0
        }
    },
    color: ['#5B8FF9', '#6DC8EC'],
    series: [
        {
            name: 'Access From',
            type: 'pie',
            center: ['38%', '46%'],
            radius: ['40%', '70%'],
            labelLine: {
                length: 6
            },
            // 饼图描边
            itemStyle: {
                borderWidth: 2,
                borderColor: '#fff'
            },
            data: [
                { value: 1048, name: '载波' },
                { value: 735, name: '无线' },
            ],
            label: {
                normal: {
                    formatter: ' {b} \n\n {c}',
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        }
    ]
};

echarts自定义name

this.pieOption = {
            title: [{
                target: 'self',
                top: '39%',
                left: '19%',
                textStyle: {
                    color: '#3B82FE',
                    fontSize: 12
                }
            }],
            tooltip: {
                trigger: 'item'
            },
            color: ['#ff8c00', '#4cabce', '#e5323e', '#afeeee'],
            legend: {
                icon: 'circle',
                data: ['异常', '严重', '注意', '正常'],
                right: 30,
                top: '20%',
                orient: 'vertical',
                formatter: (name) => {
                    let value;
                    switch (name) {
                        case '异常':
                            value = serious;
                            break;
                        case '严重':
                            value = abnormal;
                            break;
                        case '注意':
                            value = beCareful;
                            break;
                        case '正常':
                            value = normal;
                            break;

                    }
                    return [
                        '{a|' + name + '}' + '{b|' + ' | ' + ((value / (serious + abnormal + beCareful + normal) * 100) ?
                            (value / (serious + abnormal + beCareful + normal) * 100) : 0).toFixed(2) + '%' + '}' + value
                    ];
                },
                textStyle: {
                    rich: {
                        a: {
                            fontSize: 14,
                            width: 65,
                        },
                        b: {
                            fontSize: 14,
                            color: '#B4BECC',
                            padding: [0, 20, 0, 10],
                        }
                    }
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['24%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    data: [
                        {value: serious, name: '异常'},
                        {value: abnormal, name: '严重'},
                        {value: beCareful, name: '注意'},
                        {value: normal, name: '正常'},
                    ]
                }
            ]
        };

 <div id="networkPane" :style="{  width: '100%', height: '147px' }">div>

mounted(): void {
    this.drawWeekOnYear();
}

drawWeekOnYear(){
    // 获取echarts操作的画布
    let weekOnYear = echarts.init(document.getElementById("networkPane"));
    const serious = 2;
    const abnormal = 6;
    const beCareful = 3;
    const normal = 12;
    const other = 1;
    // 给画布添加图表数据
    weekOnYear.setOption({
        title: [{
            target: 'self',
            top: '39%',
            left: '19%',
            textStyle: {
                color: '#3B82FE',
                fontSize: 12
            }
        }],
        tooltip: {
            trigger: 'item'
        },
        color: ['#5B95F9', '#5AD8A6', '#F6BD16', '#5D7092', '#E86452'],
        legend: {
            icon: 'circle',
            data: ['生活服务类型', '服务类型', '服务', '生活服务', '其他'],
            right: 30,
            top: '4%',
            orient: 'vertical',
            formatter: (name) => {
                let value;
                switch (name) {
                    case '生活服务类型':
                        value = serious;
                        break;
                    case '服务类型':
                        value = abnormal;
                        break;
                    case '服务':
                        value = beCareful;
                        break;
                    case '生活服务':
                        value = normal;
                        break;
                    case '其他':
                        value = other;
                        break;

                }
                return [
                    '{a|' + name + '}' + '{b|' + ' | ' + ((value / (serious + abnormal + beCareful + normal + other) * 100) ?
                        (value / (serious + abnormal + beCareful + normal + other) * 100) : 0).toFixed(2) + '%' + '}' + value
                ];
            },
            textStyle: {
                color: "#FFF",
                rich: {
                    a: {
                        fontSize: 12,
                        width: 65,
                    },
                    b: {
                        fontSize: 12,
                        padding: [0, 20, 0, 10],
                    }
                }
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['26%', '52%'],
                avoidLabelOverlap: false,
                labelLine: {
                    normal: {
                        length: 8
                    }
                },
                label: {
                    normal: {
                        formatter: ' {b} \n {c}',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: [
                    {value: serious, name: '生活服务类型'},
                    {value: abnormal, name: '服务类型'},
                    {value: beCareful, name: '服务'},
                    {value: normal, name: '生活服务'},
                    {value: other, name: '其他'},
                ]
            }
        ]
    });
    // 图表自适应（屏幕缩放图表不变形）
    window.addEventListener('resize', () => {
        weekOnYear.resize();
    });
}

echarts修改legend样式

{
            color: ['#36A4DB', '#2bb76d', '#5AD8A6', '#F6BD16', '#228f8e'],
            legend: {
                data: ['等效时数', '理论发电量', '实际发电量', '上网电量'],
                icon: 'rect',
                itemHeight: 1.5,
                itemWidth: 12,
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1', '3', '5', '7', '9', '11', '13', '17', '19', '21', '23', '25', '27', '29', '31'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '万kWh',
                    min: 0,
                    max: 15,
                    interval: 3,
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    }
                },
                {
                    type: 'value',
                    name: 'h',
                    min: 0,
                    max: 5,
                    interval: 1,
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    }
                }
            ],
            series: [
                {
                    name: '等效时数',
                    type: 'bar',
                    smooth: true,
                    data: [4.54, 4.54, 4.54, 4.54, 4.54, 4.54, 4.54, 4.54, 4.54, 4.54],
                    barWidth: 30
                },
                {
                    name: '理论发电量',
                    type: 'line',
                    smooth: true,
                    data: [14.54, 14.54, 14.54, 14.54, 14.54, 14.5, 14.54, 14.54, 14.54, 14.54, 14.54],
                    barWidth: 30
                },
                {
                    name: '实际发电量',
                    type: 'line',
                    smooth: true,
                    data: [7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05, 7.05],
                    barWidth: 30
                },
                {
                    name: '上网电量',
                    type: 'line',
                    smooth: true,
                    data: [0.05, 0, 0, 0.158, 0.05, 0, 0, 0.158, 0.05, 0, 0, 0.158, 0.05, 0, 0, 0.158, 0.05],
                    barWidth: 30
                }
            ]
        }

柱状图上添加数字

label: {
  // 柱图头部显示值
  show: true,
  position: "right",
  color: "#999",
  fontSize: "12px",
  formatter: (params) => {
    return params.value;
  },
},

折线图设置缩放

拖放轴的和坐标轴的距离是通过grid来控制的。

tooltip多列显示

tooltip: {
      trigger: 'axis',
      confine: true,
      formatter: (params) => {
          const autoWidth = Math.ceil(params.length / 15)
          //宽度这里autoWidth * 220代表了每列的宽度相加得到总宽度
          //高度这里因为要换行显示所以也需要计算出来（这里因为需求方的要求，数据需要竖排排序显示，所以flex-flow 为 column）
          let str = `${autoWidth * 220}px; max-width: 1000px; overflow: hidden; display: flex;flex-flow: column wrap; justify-content: flex-start;height:${Math.ceil((params.length / autoWidth)) * 22}px; ">`
          params.forEach((item) => {
              //这里算每列宽度的百分比
              str += `${((1 / autoWidth) * 100)}%;height: 22px;display: flex;flex-flow: row nowrap; justify-content: flex-start;align-items: center">
              ${item?.color};border-radius: 10px;line-height: 22px">
              ${item.seriesName}：
              ${item?.data}
              `
          })
          str += ``
          return str
      }
  },

echarts 折线图跟数据不一致

echarts 折线图跟数据不一致是在 series 中设置了 stack 导致的。

渐变不生效

不生效代码：

修改后：

自定义提示：

{
	// 自定义提示
      tooltip: {
        show: true,
        formatter: (params) => {
          return '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-image: linear-gradient(to right, #56C4F0 , rgba(86, 196, 240, 0));"></span>'  + params.name + ' 
 ' + '案件数:  ' + params.value + '

';
        }
      },
      grid: {
        left: '0',
        right: '4%',
        top: '0',
        width: '100%',
        height: '100%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
      },
      yAxis: {
        type: 'category',
        data: ['今日头条', '腾讯新闻', '新浪微博', '东方网', '南方娱乐'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
      },
      series: [
        {
          name: '2011',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744],
          barWidth: 14,
          label: {
            normal: {
              show: true,//是否显示
              position: 'right',
              formatter: '{a}',
              color: '#999'
            },
          },
          itemStyle: {
            barBorderRadius: [0, 14, 14, 0],
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#61aaff' // 0% 处的颜色
              }, {
                offset: 1, color: '#99d4ff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }

柱状图数据过多导致x轴数据显示不全

倾斜坐标轴文字

axisLabel: {
	// 强制设置坐标轴分割间隔
    interval: 0,
    // 文字的倾斜角度
    rotate: 10
},

使用formatter让文字竖直显示(仅适用于x轴)

formatter(value){
    return value.split("").join("\n");
}

当标签文件显示过多时，我们可以通过双行显示(注意要考虑数字和字母的情况，如下代码仅适用于文字)

axisLabel: {
  interval: 0,
  formatter(value){
      var ret = "";//拼接加\n返回的类目项
      var maxLength = 2;//每项显示文字个数
      var valLength = value.length;//X轴类目项的文字个数
      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
      if (rowN > 1)//如果类目项的文字大于3,
      {
          for (var i = 0; i < rowN; i++) {
              var temp = "";//每次截取的字符串
              var start = i * maxLength;//开始截取的位置
              var end = start + maxLength;//结束截取的位置
              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
          }
          return ret;
      }
      else {
          return value;
      }
  }
}

通过formatter截取返回的数据

axisLabel: {
    interval: 0,
    formatter(val){
        return val.slice(0, 6) + '...';
    }
}

动态渲染（通过数据来确定画布的高度，使用滚动条）

<div style="height: 300px;overflow: auto;">
  div
      ref="balanceSortChart"
      v-if="tableData.length > 0"
      :style="{height: compayGather.length * 30 + 'px'}"
  ></div>
 </div>

tooltip提示框溢出被遮挡

处理前：

处理后：

	tooltip: {
          // 将 tooltip 框限制在图表的区域内
          confine: true
        }
    }

混合动态柱状折线图tooltip显示内容不对

显示的内容在初始化的前提上修改的


解决方法：

柱状图给每个柱子单独设置颜色

option = {
  xAxis: {
    type: 'category',
    data: ['粉尘', '火焰', '乙醇', '氢气', '线式二合一']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70],
      type: 'bar',
      itemStyle: {
				normal: {
					color: function(params) {
						// 给出颜色组
						var colorList = ['#F6BD16', '#E8684A', '#38A9FF', '#38DEFF', '#5AD8A6'];
                            //循环调用
						return colorList[params.dataIndex%colorList.length]
					},
				}
			}
    }
  ]
};

南丁格尔玫瑰图

实现以下效果

const option = {
        color: ['#4ad113', '#53c7ff', '#fae620'],
        legend: {
            icon: "path://M358.3999938964844,389.1199951171875l307.1999816894531,0l0,256L358.3999938964844,645.1199951171875ZM357.96990966796875,644.485107421875c-70.68670654296875,0,-127.99998474121094,-57.169921875,-127.99998474121094,-127.68255615234375S287.283203125,389.1199951171875,357.96990966796875,389.1199951171875M666.0198364257812,389.7651062011719c70.69696044921875,0,128,57.159698486328125,128,127.68258666992188S736.716796875,645.1199951171875,666.0198364257812,645.1199951171875",
            bottom: '0',
            textStyle: {
                color: '#fff',
            },
            itemStyle: {
                borderWidth: 0
            },
            data:[{
                "name": "等级一",
                "value": 132
            },
                {
                    "name": "等级二",
                    "value": 68
                },
                {
                    "name": "等级三",
                    "value": 36
                }]
        },
        series: [
            // 主要展示层的
            {
                radius: ['36%', '60%'],
                center: ['50%', '36%'],
                type: 'pie',
                roseType: 'radius',
                label: {
                    formatter:  function(params) {
                        return '{color0|' + params.data.name + '\n' + '}' + '{color2|' + params.data.value + '次' + '}'
                    },
                    // 设置 formatter 中文字的内容
                    rich: {
                        'color0': {
                            color: '#fff',
                            fontSize: 12
                        },
                        'color2': {
                            color: 'inherit',
                            fontSize: 10
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 6,
                        length2: 6
                    }
                },
                itemStyle: {
                  borderWidth: 2,
                  borderColor: 'rgba(250,250,250,0.3)'
                },
                name: "总量",
                data: [{
                    "name": "等级一",
                    "value": 36
                },
                    {
                        "name": "等级二",
                        "value": 136
                    },
                    {
                        "name": "等级三",
                        "value": 536
                    }],

            },
            // 内圆环
            {
                radius: ['28%', '30%'],
                center: ['50%', '36%'],
                type: 'pie',
                animation: false,
                tooltip: {
                    show: false
                },
                labelLine: {
                    normal: {
                        show: false,
                    }
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        color: "rgba(250,250,250,0.3)",
                    },
                }],
            }
        ]
    };

折线图上添加数字

代码配置：

option = {
        tooltip: {
            trigger: "axis"
        },
        xAxis: [
            {
                type: "category",
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                axisPointer: {
                    type: "shadow"
                },
                axisLabel: {
                    color: "#fff"
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, .15)"
                    }
                }
            }
        ],
        grid: {
            top: "18%",
            bottom: "4%"
        },
        color: ["#5AD8A6"],
        yAxis: [
            {
                type: "value",
                min: 0,
                max: 1000,
                interval: 250,
                axisLabel: {
                    color: "#fff"
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#264649"
                    }
                }
            }
        ],
        series: [
            {
                name: "水位",
                type: "line",
                symbol: "emptyCircle",
                symbolSize: 6,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                },
                data: [12.0, 202.2, 303.3, 404.5, 605.3, 100.2, 200.3, 230.4, 203.0, 160.5, 120.0, 60.2]
            }
        ]
    };

多数据滚动加载

实现原理：定时器和dataZoom。

setInterval(() => {
  if (this.osmoticPressureMonitorOption.dataZoom[0].endValue == dataOption.osmoticPressureTime.length ) {
       this.osmoticPressureMonitorOption.dataZoom[0].endValue = 5;
       this.osmoticPressureMonitorOption.dataZoom[0].startValue = 0;
   } else {
       this.osmoticPressureMonitorOption.dataZoom[0].endValue = this.osmoticPressureMonitorOption.dataZoom[0].endValue + 1;
       this.osmoticPressureMonitorOption.dataZoom[0].startValue = this.osmoticPressureMonitorOption.dataZoom[0].startValue + 1;
   }
}, 2000)

osmoticPressureMonitorOption = {
        tooltip: {
            trigger: "axis"
        },
        // 重点
        dataZoom: [
            {
                xAxisIndex: 0,// 这里是从X轴的0刻度开始
                show: false, // 是否显示滑动条，不影响使用
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 5, // 一次性展示多少个。
            },
        ],
        xAxis: [
            {
                type: "category",
                data: dataOption.osmoticPressureTime,
            }
       ]
}

柱状图背景上添加数字

使用yAxis双轴实现：

sateOption = {};
created() {
    const failureData = [2, 1, 1, 1, 1];
    // copy 一下使用 reverse 会翻转原数组
    const failureData1 = [2, 1, 1, 1, 1];
    this.sateOption = {
        grid: {
            left: "5%",
            right: "5%",
            bottom: "0",
            top: "5%",
            containLabel: true
        },
        tooltip: {
            show: true,
            textStyle: {
                fontWeight: "bold",
                fontSize: 16
            }
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLabel: {
                    show: true,
                    color: "#8f919e",
                    fontSize: 12
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: ["光纤加工机床(JQ10083-OLD)", "philips显示器(SB2018111500001)", "带式输送机(GY-20000cs)", "正锥型提取罐(DEV2020000142)", "聚脉喷涂机(DEV2020000148)"]
            },
            {
                data: failureData1.reverse(),
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 0,
                    interval: 0,
                    inside: true,
                    padding: [0, -12, 0, 0],
                    fontSize: 12,
                    align: 'right',
                    verticalAlign: 'middle'
                }
            }
        ],
        xAxis: [
            {
                type: "value",
                axisTick: {
                    show: false
                },
                min: 0,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            }
        ],
        series: [
            {
                type: "bar",
                stack: "1",
                barWidth: 12,
                barBorderRadius: 30,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(228, 237, 248, 1)',
                    borderRadius: 7
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: '#2c90ff'
                    }
                },
                data: failureData
            }
        ]
    };
}

动态折线图

例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="https://www.shulanxt.com/visualization/echarts/data-update/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/data-update/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div></div>
<script type="text/javascript">
var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
date.push(now);
data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
if (shift) {
date.shift();
data.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
addData();
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value'
},
series: [
{
name:'成交',
type:'line',
smooth:true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name:'成交',
data: data
}]
});
}, 500);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option)
</script>
</body>

例2：

const base = +new Date(2021, 1, 1);
    const oneDay = 24 * 3600 * 1000;
    const date = [];
    const data = [Math.random() * 150];
    let now = new Date(base);
    function addData(shift) {
      now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
      date.push(now);
      data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
      if (shift) {
        date.shift();
        data.shift();
      }
      now = new Date(+new Date(now) + oneDay);
    }
    for (let i = 1; i < 12; i++) {
      addData();
    }
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        show: false
      },
      color: '#0887FF',
      grid: {
        left: '3%',
        right: '4%',
        top: '10%',
        bottom: '14%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999',
          }
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: "dotted"
          }
        },
        axisLabel: {
          show: false,
        },
        axisLine:{
          show: false
        }
      },
      series: [
        {
          type: 'line',
          smooth: true,
          areaStyle:{
            color: new echarts.graphic.LinearGradient(
              0, 1, 0, 0,
              [
                {offset: 1, color: '#00A0E4'},
                {offset: 0, color: '#fbfdfe'},
              ],
            ),
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#00b3f4',
            },
            fontSize: 12,
            lineHeight: 18,
            align: 'left',
            formatter: function() {
              let strs = '网贷逾期会不会上'.split(''); //字符串数组
              let str = '';
              for(var i = 0, s; s = strs[i++];) {
                str += s;
                if(!(i % 8)) str += '\n';
                if(i > 30)  {
                  str += '......';
                  break;
                }
              }
              return str
            }
          },
        }
      ]
    };
    // 图表
    setInterval(function () {
      addData(true);
      myChart.setOption({
        xAxis: {
          data: date
        },
        series: [{
          data: data
        }]
      });
    }, 800);
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.trackingChart);
    myChart.setOption(option)

混合环形图

option = {
        title: {
            text: '88.6%',
            textStyle: {
                color: '#5ef899',
                fontSize: 24
            },
            subtext: '机组完好率',
            subtextStyle: {
                color: '#88B6D1',
                fontSize: 14
            },
            itemGap: 20,
            left: 'center',
            top: '34%'
        },
        angleAxis: {
            max: 100,
            // 隐藏刻度线
            show: false,
            startAngle: 80
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
        },
        polar: [{
            center: ['50%', '50%'], //中心点位置
            radius: '150%', //图形大小

        }],
        series: [{
            type: 'bar',
            z: 10,
            // 饼图的数据值
            data: [40],
            showBackground: false,
            backgroundStyle: {
                color: '#00ACFF',
                borderWidth: 10,
                width: 10
            },
            coordinateSystem: 'polar',
            barWidth: 25,
            itemStyle: {
                normal: {
                    opacity: 1,
                    color: '#4ad112',
                }
            }
        },
            {
                type: 'pie',
                name: '内层细圆环',
                radius: ['68%', '80%'],
                // 起始角度
                startAngle: 0,
                hoverAnimation: false,
                // 顺时针
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: '#2a739e',
                    }
                },
                tooltip: {
                    show: false

                },
                label: {
                    show: false
                },
                data: [100]
            }
        ]
    };

echarts 图表只加载一次（切换菜单之后图表就不显示了）

试了@Watch加载、settimeout、 $n e x tT i c k 、$ forceUpdate强制刷新都不行，最后通过vue的beforeUnmount页面销毁来解决。
把echarts示例，在data里声明。并在beforeUnmount生命周期里，对资源进行释放。

<div id="mapCharts" style="width: 100%; height: 400px">div>

mapChart = null;
mapData = [];
mapOption = {
   // 背景颜色
   backgroundColor: "#fff",
   // 提示浮窗样式
   tooltip: {
       show: true,
       trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
       axisPointer: {// 坐标轴指示器，坐标轴触发有效
           type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
       },
       alwaysShowContent: false,
       backgroundColor: "#eeeeee",
       borderColor: "rgba(0, 0, 0, 0.16);",
       triggerOn: "mousemove",
       enterable: true, //鼠标是否可进入提示框浮层中
       textStyle: {
           fontSize: "12",
           overflow: "break",
       },
       formatter: function (params) {
           let str = '';
           str = ` ` + params.name + `:` + (isNaN(params.value) ? 0 : params.value) + ``
           return str
       },
   },
   visualMap: { //分段型视觉映射组件
       show: true,
       type: 'piecewise',
       left: 50,
       bottom: 50,
       showLabel: true,
       itemWidth: 10,
       itemHeight: 10,
       inverse: true,
       // lt:小于; lte:小于等于; gt:大于; gte:大于等于;
       pieces: [
           {
               lt: 10,
               label: "<10",
               color: "#83CBAC"
           },
           {
               gte: 10,
               lte: 50,
               label: "10-50",
               color: "#55BB8A"
           },
           {
               gt: 50,
               lte: 100,
               label: "50-100ms",
               color: "#20A162"
           }
       ]
   },
   // 地图配置
   geo: {
       map: "china",
       aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
       zoom: 1.6, //视觉比例大小,1.2即为原有大小的1.2倍
       roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
       top: '25%',
       label: {
           // 通常状态下的样式
           normal: {
               show: true,
               textStyle: {
                   color: "#0d0d0d",
               },
           },
           // 鼠标放上去的样式
           emphasis: {
               textStyle: {
                   color: "#0d0d0d",
               },
           },
       },
       // 地图区域的样式设置
       itemStyle: {
           normal: {
               borderColor: "rgba(0, 0, 0, 0.1)",
               borderWidth: 1,
           },
           // 鼠标放上去高亮的样式
           emphasis: {
               // areaColor: "rgba(0, 0, 0, 0.1)",
               borderWidth: 0,
           },
       },
   },
   series: [
       {
           selectedMode: false, //取消地图区域点击事件
           geoIndex: 0,  //将数据和第0个geo配置关联在一起
           type: 'map',
           data: [],
       },
   ],
};

created(): void {
	// 调接口处理数据
	this.mapData = [];
}

// 监听数据变化，处理数据（感觉不需要，直接在mounted里面调用下就好了）
 @Watch('mapData', {deep: true, immediate: true})
 watchMapData(val: any) {
     this.$nextTick(() => {
         this.initMapCharts();
         this.$forceUpdate();
     })
 }

// 加载图表方法
initMapCharts() {
        // 地图json要放在第一位
        // eslint-disable-next-line @typescript-eslint/no-var-requires
        echarts.registerMap("china", require('../util/china.json'));
        this.mapChart = echarts.init(document.getElementById("mapCharts"));
        this.mapChart.clear();
        this.mapChart.setOption(this.mapOption, true);
        this.mapChart.on("mouseover", () => {
            this.mapChart.dispatchAction({
                type: 'legendUnSelect'
            });
        });
        window.addEventListener('resize', () => {
            this.mapChart.resize();
        }, )
    }

// 页面销毁（重点）
beforeUnmount() {
    if (!this.mapChart) {
        return
    }
    this.mapChart.dispose();
    this.mapChart = null;
}

立体圆柱

链接

xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量'];
yData = [0, 1230, 425];
option = {
    backgroundColor: '#061326',
    grid: {
        top: '25%',
        left: '-5%',
        bottom: '5%',
        right: '5%',
        containLabel: true,
    },
    tooltip: {
        show: true,
    },
    animation: false,
    xAxis: [
        {
            type: 'category',
            data: xData,
            axisTick: {
                alignWithLabel: true,
            },
            nameTextStyle: {
                color: '#82b0ec',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#82b0ec',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
                margin: 30,
            },
        },
    ],
    yAxis: [
        {
            show: false,
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#0c2c5a',
                },
            },
            axisLine: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -6], // 上部椭圆
            symbolPosition: 'end',
            z: 12,
            // "barWidth": "0",
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    // "formatter": "{c}%"
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#34DCFF',
                },
            },
            color: '#2DB1EF',
            data: yData,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, 7], // 下部椭圆
            // "barWidth": "20",
            z: 12,
            color: '#2DB1EF',
            data: yData,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: function (d) {
                return d > 0 ? [50, 15] : [0, 0]
            },
            symbolOffset: [0, 12], // 下部内环
            z: 10,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#2EA9E5',
                    borderType: 'solid',
                    borderWidth: 1,
                },
            },
            data: yData,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [70, 20],
            symbolOffset: [0, 18], // 下部外环
            z: 10,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#19465D',
                    borderType: 'solid',
                    borderWidth: 2,
                },
            },
            data: yData,
        },
        {
            type: 'bar',
            //silent: true,
            barWidth: '40',
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                        {
                            offset: 0,
                            color: '#38B2E6',
                        },
                        {
                            offset: 1,
                            color: '#0B3147',
                        },
                    ]),
                    opacity: 0.8,
                },
            },
            data: yData,
        },
    ],
};

立体柱状图

链接

var xData = ["工单", "影响客户"];
var yData1 = [100, 60];
var yData2 = [80, 40];
var path = 'path://M214,1079l8-6h16l8,6-8,6H222Z';
option = {
    backgroundColor: 'BLACK',
    title: {
        text: '本年预安排停电',
        top: 5,
        left: '20%',
        textStyle: {
            fontSize: 18,
            color: '#fff'
        }
    },
    legend: {
        data: ['总数', '未复电数']
    },
    "grid": {
        "top": "25%",
        "left": "-5%",
        "bottom": "10%",
        "right": "5%",
        "containLabel": true
    },
    animation: false,
    "xAxis": [{
        "type": "category",
        "data": xData,
        "axisTick": {
            show: false,
            "alignWithLabel": true
        },
        "nameTextStyle": {
            "color": "#fff"
        },
        "axisLine": {
            show: false,
            "lineStyle": {
                "color": "#82b0ec"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            margin: 20
        }
    }],
    "yAxis": [{
        show: false,
        "type": "value",
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            },
            "formatter": "{value}%"
        },
        "splitLine": {
            "lineStyle": {
                "color": "#0c2c5a"
            }
        },
        "axisLine": {
            "show": false
        }
    }],
    "series": [{
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [-20, -5],
            symbolPosition: 'end',
            z: 12,
            color: "#68B4FF",
            data: yData1
        },
        {
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [20, -5],
            symbolPosition: 'end',
            z: 12,
            color: "#FFCE69",
            data: yData2
        },
        {
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [-20, 5],
            z: 12,
            color: "#68B4FF",
            data: yData1
        },
        {
            name: '',
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [30, 8],
            symbolOffset: [20, 5],
            color: "#FFCE69",
            z: 12,
            data: yData2
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    opacity: .7
                }
            },
            barWidth: "30",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#3D83CD"
                },
                {
                    offset: 1,
                    color: "#0B3147"
                }
            ]),
            data: yData1
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    opacity: .7
                }
            },
            barWidth: "30",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#CC9F49"
                },
                {
                    offset: 1,
                    color: "#0B3147"
                }
            ]),
            data: yData2
        }
    ]
}

同环比


var data1 = [132, 324, 327, 452, 365, 145, 326];
var data2 = [7.2, -2.6, 4.7, -3.7, -5.4, -0.5, 3.4];
//定义两个上下箭头的矢量路径
var up = 'path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z';
var down = 'path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z'
//遍历data2里面元素的正负定义一个矢量路径的数组
var path = [up,down,up,down,down,down,up]
option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            "name": "",
            type: 'pictorialBar',
            symbol: function(data,params){
                return path[params.dataIndex]
            },
            symbolSize: [20, 30],
            symbolOffset: [0, -40],
            color:'orange',
            symbolPosition: 'end',
            label: {
                show: true,
                position: "top",
                formatter:  function(params){
                    return data2[params.dataIndex]
                },
                fontSize: 30,
                fontWeight: 'bold',
                color: '#34DCFF'
            },
            data: data1
        },
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '40%',
            data: data1
        }
    ]
};

关系图

链接

let dataInfo = [{
    name: "京东科技集团有限公司",
    category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
    symbolSize: 40,
    draggable: true,
    fixed: true,
    value: [100, 0],
    label: {
        normal: {
            textStyle: {
                color: '#f6b03c',
                fontSize: 18
            },
        }
    }
},{
    name: "一级关联实体企业",
    category: 1,
    value: [40, 20],
    draggable: true,
    fixed: true,
    symbolSize: 20,
    label: {
        normal: {
            textStyle: {
                color: '#2595ff',
                fontSize: 14
            },
        }
    }
}, {
    name: "二级关联实体企业",
    category: 2,
    value: [50, -20],
    draggable: true,
    fixed: true,
    symbolSize: 20,
    label: {
        normal: {
            textStyle: {
                color: '#34cc6e',
                fontSize: 14
            },
        }
    }
}, {
    name: "姓名",
    category: 3,
    value: [150, 20],
    draggable: false,
    symbolSize: 20,
     label: {
        normal: {
            textStyle: {
                color: '#47a4c6',
                fontSize: 14
            },
        }
    }
}]
let dataLink = [{
    source: "京东科技集团有限公司",
    value: "关系",
    target: "一级关联实体企业",
    lineStyle: {
        color: '#f7b84f'
    }
}, {
    source: "京东科技集团有限公司",
    value: "关系",
    target: "二级关联实体企业",
     lineStyle: {
        color: '#f7b84f'
    }
}, {
    source: "京东科技集团有限公司",
    value: "关系",
    target: "姓名",
     lineStyle: {
        color: '#f7b84f'
    }
}]
option = {
    title: {
        text: "实体属性关系图",
        top: "top",
        left: "center"
    },
    itemStyle: {
        shadowBlur: 10
    },
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    series: [{
        type: 'graph',
        coordinateSystem: 'cartesian2d',
        legendHoverLink: false,
        hoverAnimation: true,
        nodeScaleRatio: false,
        //建头
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [2, 10],
        edgeLabel: {
            show: false,
            normal: {
                show: true,
                position: 'middle',
                textStyle: {
                    fontSize: 12
                },
                formatter: "{c}"
            }
        },
        roam: true,
        categories: [{
            name: '0级',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#f7b84f",
                }
            },
        }, {
            name: '1级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#7cbfff",
                }
            }
        }, {
            name: '2级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#83e1a7",
                }
            }
        }, {
            name: '3级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#a3dff5",
                }
            }
        }],
        itemStyle: {
          shadowBlur: 0  
        },
        //圆形上面的文字
        label: {
            normal: {
                position: "bottom",
                show: true,
                textStyle: {
                    color: '#000',
                    fontSize: 12
                },
            }
        },
        
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0.1
            }
        },
        data: dataInfo,
        links: dataLink
    }]
}

词云

链接

let colorList = [
    '#CF4645','#B580B2','#29008A','#146A90','#8956FF','#70C9A8',
    '#bfbfbf','#595959',
    '#40a9ff','#1890ff',
    '#ffd666','#ffc53d','#ffc53d','#ffc069','#ffa940','#fa8c16',
    '#eccbd9','#ffadad','#ff6392','#ffc09f','#ffcb77','#ffe066','#ffd53e','#ffda3d','#adf7b6','#a0e8af','#80ed99','#07beb8','#17c3b2','#48cae4','#97d2fb','#83bcff','#91e5f6','#9381ff']
let colorListLen = colorList.length
let fontSizeList = [
    12,12.5,13,13.5,14,14.5,
    15,15.5,16,16.5,17,17.5,
    18,18.5,19,19.5,20,20.5,
    21,22,23,
    24]
let fontSizeListLen = fontSizeList.length
let customLabel = {
    color: colorList[Math.floor(Math.random()*colorListLen)],
    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
}
let bgColor = '#fffcf9'
let canDraggable = false
option = {
                backgroundColor: '#fffcf9',
                color: ['#37A2DA', '#32C5E9', '#67E0E3'],
                title: {
                    show: false,
                    text: '一天的时间流逝',
                    x: 'center',
                    y: 'bottom',
                    // 文字的颜色,默认 #333。
                    color: '#666',
                    fontSize: 24
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataView: {readOnly: false},
                        // magicType: {type: ['line', 'bar']},
                        restore: {},
                        // saveAsImage: {}
                    }
                },
                itemStyle: {
                    color: bgColor
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            repulsion: 80,
                            edgeLength: 10
                        },
                        roam: 'scale',
                        // symbol: '',
                        // symbolSize: 0,
                        label: {
                            show: true,
                            color: 'auto',
                            fontSize: 14
                        },
                        data: [
                            {
                                name: '金融',
                                value: 100,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '新能源',
                                value: 1,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '跑步',
                                value: 22,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '瑜伽',
                                value: 42,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '发呆',
                                value: 52,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '阅读',
                                value: 62,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '唱歌',
                                value: 72,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '跳舞',
                                value: 72,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '追星',
                                value: 72,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            }
                        ]
                    }
                ]
            }

还可以通过echarts-wordcloud来编写：

characterCloud: (popularWordCloud) => {
    // 自定义词云中文字的颜色及大小
    let deptData = popularWordCloud;
    let dataList = [];   for (let i = 0; i < deptData.length; i++) {
      dataList.push({
        value: i == 0 ? 1000000 : Math.ceil(i * 100),
        name: deptData[i],
        textStyle: {
          color: (i < 20 ? 'rgba(8,135,255,' : 'rgba(91,181,214,') + opacityList[i] + ')',
          fontSize: fontSizeList[i]
        }
      })
    }
    // 返回的数据对象
    return {
      color: ['#37A2DA', '#32C5E9', '#67E0E3'],
      itemStyle: {
        color: '#fffcf9'
      },
      // 设置词云的最大最小缩放
      scaleLimit:{
        min: 0.5,
        max: 0.7
      },
      series: [
        {
          type: 'wordCloud',
          rotationRange: [0, 20],
          textPadding: 10,
          left: 'center',
          top: 'center',
          width: "80%",
          height: "100%",
          data: dataList
        }
      ]
    }
  },

你可能感兴趣的:(笔记,echarts)

10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
git常用命令笔记咩酱-小羊 git 笔记
###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
Pyecharts数据可视化大屏：打造沉浸式数据分析体验我的运维人生信息可视化数据分析数据挖掘运维开发技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
509. 斐波那契数(每日一题) lzyprime
lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
拥有断舍离的心态，过精简生活--《断舍离》读书笔记爱吃丸子的小樱桃
不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
高端密码学院笔记285 柚子_b4b4
高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
Day17笔记-高阶函数 ~在杰难逃~ Python 笔记 python 开发语言 pycharm 数据分析
高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
pyecharts——绘制柱形图折线图 2224070247 信息可视化 python java 数据可视化
一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
数据仓库——维度表一致性墨染丶eye 背诵数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
【Git】常见命令(仅笔记) 好想有猫猫 Git Linux学习笔记 git 笔记 elasticsearch linux c++
文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
为什么你总是对下属不满意? ZhaoWu1050
【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样，都是一边
母亲节如何做小红书营销美橙传媒
小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
基于Python给出的PDF文档转Markdown文档的方法程序媛了了 python pdf 开发语言
注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在
语文主题教学学习笔记之87 东哥杂谈
“语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
Armv8.3 体系结构扩展--原文版代码改变世界ctw ARM-TEE-Android armv8 嵌入式 arm架构安全架构芯片 Trustzone Secureboot
快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
阅读《认知觉醒》读书笔记就看看书
本周阅读了周岭的《认知觉醒开启自我改变的原动力》，启发较多，故做读书笔记一则，留待学习。全书共八章，讲述了大脑、潜意识、元认知、专注力、学习力、行动力、情绪力及成本最低的成长之道。具体描述了大脑、焦虑、耐心、模糊、感性、元认知、自控力、专注力、情绪专注、学习专注、匹配、深度、关联、体系、打卡、反馈、休息、清晰、傻瓜、行动、心智宽带、单一视角、游戏心态、早起、冥想、阅读、写作、运动等相关知识点。大脑
阅读笔记：阅读方法中的逻辑和转念施吉涛
聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也
《转介绍方法论》学习笔记小可乐的妈妈
一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式 android java 常用设计模式
博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
解决Obsidian写笔记中的＜img＞标签无法显示图片的问题全能全知者笔记
Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件仓库
2021年周总结 03 Ruby之家
这周的生活过得也是比较快，因为暂时住的离公司有点距离，所以通勤时间相对较长一点，而在地铁上的一个半小时如何充分利用起来，则是我最近一直在思考的问题，2021年想让自己的生活都运行在计划中。(有时候自己想干一件事情就总是给自己找很多借口，想着以后怎么怎么样？然而哪有那么多的以后，能够方便当下的工作生活就立马执行就OK，这仅仅只是我此时想到背的很重的老人机笔记本电脑，也算是陪伴我快8年的—当时买的时候
2021-12-11 人生导演
今天读到佛学书籍的一段话：初学者很难直接体验到无我，但可以经常提醒自己：一切事物都是无我的。不断强化这个观念，也会相当有帮助。比如生病了我们一般会说：“我不舒服！我很痛！我很惨！”这时候如果我们提醒自己：没有我，只是这个肉体的某些部分、某些功能出了问题，不舒服、疼痛也只是一时的感受，而感受随时在变化。仅仅是知道没有一个实存的我在生病、在受苦。然后把“一切事物都是无我的”这句话，记到笔记上，并且朗读
微信开发者验证接口开发 362217990 微信开发者 token 验证
微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置第二步：验证服务器地址的有效性第三步：依据接口文档实现业务逻辑这里主要讲第二步验证服务器有效性。建一个
一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
今天群友出了一题：一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。 &
linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义 linux关于减号“-”的用途 linux关于“-”的含义 linux关于减号的含义
转载请出自出处： http://eksliang.iteye.com/blog/2105677 管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
Unix(3) 18289753290 unix ksh
1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and ||代表or&nbs
关于ListView中性能优化中图片加载问题酷的飞上天空 ListView
ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594 如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。现在想出一个方法就是每次都添加一个标识，然后设置图
德国总理默多克：给国人的一堂“震撼教育”课永夜-极光教育
http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
关于Java继承的一个小问题。。。随便小屋 java
今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
23种基本的设计模式 aijuans 设计模式
Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。　　Builder：将一个复杂对象的构建与它的表示分离，使得同
《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品. 商业模式不是赚钱模式一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链. 商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
JavaScript动态改变样式访问技术百合不是茶 JavaScript style属性 ClassName属性
一:style属性格式: HTML元素.style.样式属性="值"; 创建菜单:在html标签中创建或者在head标签中用数组创建 <html> <head> <title>style改变样式</title> </head> &l
jQuery的deferred对象详解 bijian1013 jquery deferred对象
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。 &nb
淘宝开放平台TOP Bill_chen C++c 物流 C#
淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform，是淘宝合作伙伴开发、发布、交易其服务的平台。支撑TOP的三条主线为： 1.开放数据和业务流程 * 以API数据形式开放商品、交易、物流等业务； &
【大型网站架构一】大型网站架构概述 bit1129 网站架构
大型互联网特点面对海量用户、海量数据大型互联网架构的关键指标高并发高性能高可用高可扩展性线性伸缩性安全性大型互联网技术要点前端优化 CDN缓存反向代理 KV缓存消息系统分布式存储 NoSQL数据库搜索监控安全想到的问题： 1.对于订单系统这种事务型系统，如
eclipse插件hibernate tools安装白糖_ Hibernate
eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
Jquery easyui Form表单提交注意事项 bozch jquery easyui
jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下： 1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
html css 鼠标形状样式汇总 chenbowen00 html css
css鼠标手型cursor中hand与pointer Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/> Example：CSS鼠标手型效果 <a href="#" style=&qu
[IT与投资]IT投资的几个原则 comsci it
无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......
oracle with语句详解 daizj oracle with with as
oracle with语句详解转在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用例子:注意，这是sql语句，不是pl/sql语句，可以直接放到jdbc执行的 ----------------------------------------------------------------
hbase的简单操作 deng520159 数据库 hbase
近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表 # 语法：create <table>, {NAME => <family&g
C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
/* 2013年3月11日20:37:32 地点：北京潘家园功能：完成用户格式化输入多个值目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
2015越来越好 dcj3sjt126com 歌曲
越来越好房子大了电话小了感觉越来越好假期多了收入高了工作越来越好商品精了价格活了心情越来越好天更蓝了水更清了环境越来越好活得有奔头人会步步高想做到你要努力去做到幸福的笑容天天挂眉梢越来越好婆媳和了家庭暖了生活越来越好孩子高了懂事多了学习越来越好朋友多了心相通了大家越来越好道路宽了心气顺了日子越来越好活的有精神人就不显
java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date java.sql.SQLException: Valu
Ehcache（07）——Ehcache对并发的支持 234390216 并发 ehcache 锁 ReadLock WriteLock
Ehcache对并发的支持在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
mysql中blob,text字段的合成索引 jackyrong mysql
在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能，但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找则速度快比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
逻辑运算与移位运算 latty 位运算逻辑运算
源码：正数的补码与原码相同例+7 源码：00000111 补码：00000111 （用8位二进制表示一个数）负数的补码：符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。 -7 源码： 10000111 ，其绝对值为00000111 取反加一：11111001 为-7补码已知一个数的补码，求原码的操作分两种情况：
利用XSD 验证XML文件 newerdragon java xml xsd
XSD文件（XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类可以实现对XSD验证的支持，使用起来也很方便。以下代码可用在J
搭建 CentOS 6 服务器(12) - Samba rensanning centos
（1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
Learn Nodejs 01 toknowme nodejs
（1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载（2）安装nodejs 安装的方式比较多，请baidu下我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本（1）上传服务器（2）解压 tar -zxvf node-v0.12.
jquery控制自动刷新的代码举例 xp9802 jquery
1、html内容部分复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option