记录一下Echarts知识点、例子代码

已于 2023-06-14 17:52:55 修改
阅读量448 收藏 1
点赞数
文章标签： echarts 前端 javascript
于 2023-04-25 14:38:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43225007/article/details/130363923
版权

1.知识点

1).Echarts中图例(legend)使用自定义图标legned部分代码：

legend:{
        show: true,
        data:[
            {
                name:'xxx',
                icon:"image://图片路径"
            },
        ],
    },

注：vue项目中图片必须放在public文件夹下，可以在public下创建一个文件夹存放图片
2).数据X轴名字太长处理方案

  1. 倾斜
	xAxis:{
		axisLabel: {
            interval:0,//0取消超长隔行显示
            rotate:30,//倾斜属性
        },
	}
  1. 设置一行显示几个字，超出换行居中显示
	xAxis:{
		axisLabel: {
            formatter:function(params) {
                let newParamsName = ''; // 最终拼接成的字符串
                let paramsNameNumber = params.length; // 实际标签的个数
                let provideNumber = 8; // 每行能显示的字的个数
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
            * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
            */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                    /** 循环每一行,p表示行 */
                    for (let p = 0; p < rowNumber; p++) {
                        let tempStr = ''; // 表示每一次截取的字符串
                        let start = p * provideNumber; // 开始截取的位置
                        let end = start + provideNumber; // 结束截取的位置
                        // 此处特殊处理最后一行的索引值
                        if (p === rowNumber - 1) {
                            // 最后一次不换行
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            // 每一次拼接字符串并换行
                            tempStr = params.substring(start, end) + '\n';
                        }
                        newParamsName += tempStr; // 最终拼成的字符串
                    }
                    //超出2行显示...
                    //if(rowNumber>2){
                            //  newParamsName+='...'
                            //}		

                } else {
                    // 将旧标签的值赋给新标签
                    newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName
            }
        },
	}
  1. 设置显示字数，超出显示…，鼠标移入显示全

2.Echarts例子代码

柱状图1：
在这里插入图片描述

import * as echarts from 'echarts'
let option = {
  grid: {
    left: "-14%",
    right: "0%",
    bottom: "-10%",
    top: "10%",
    containLabel: true,//是否包含坐标
  },
  // backgroundColor:'red',
  tooltip: {
    show: false,
    trigger: "axis",
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      console.log(params);
    },
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        margin: 100,
        fontFamily: 'PingFangSC-Regular',
        fontWeight: '400',
        fontSize: '14px',
        color: '#FFFFFF',
        align: 'left'
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: ["结肠息肉", "胃早癌", "结直肠早癌", "食管早癌"],
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        margin: 35,
        fontSize: "16",
        fontFamily: 'DINPro-Regular',
        fontWeight: '400',
        fontSize: '16px',
        color: '#11CABE',
        letterSpacing: 0,
        formatter: function (value) {
          return value+ " %";
        },
      },
      data: [45.17, 27.91, 13.88, 12.19],
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      zlevel: 1,
      itemStyle: {
        borderRadius: 0,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "rgba(17,202,190,0.5)",
          },
          {
            offset: 1,
            color: "rgba(17,202,190,1)",
          },
        ]),
      },
      barWidth: 4,
      data: [45.17, 27.91, 13.88, 12.19],
    },
    {
      name: "背景",
      type: "bar",
      barWidth: 4,
      barGap: "-100%",
      data: [100, 100, 100, 100, 100],
      itemStyle: {
        color: "rgba(36,216,249,0.1)",
        borderRadius: 0,
      },
    },
  ],
};

柱状图2：
在这里插入图片描述

import * as echarts from 'echarts'
let option = {
    grid: {
        left: '2%',
        right: '6%',
        top: '35%',
        bottom: '-1%',
        containLabel: true
    },
    color: [
        {
            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
                { offset: 0.2, color: 'rgba(208, 110, 110, 1)' },// 0% 处的颜色
                { offset: 1, color: 'rgba(208, 110, 110, 0.5)' },// 100% 处的颜色
            ],
            global: false // 缺省为 false
        },
        {
            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
                { offset: 0, color: 'rgba(17, 202, 190, 1)' },// 0% 处的颜色
                { offset: 1, color: 'rgba(17, 202, 190, 0.5)' },// 100% 处的颜色
            ],
            global: false // 缺省为 false
        }
    ],
    barWidth: 18,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(208, 110, 110, 0.2)',
          type: 'solid',
          width: 80
        },
      },
      textStyle: {
        color: "white" //设置文字颜色
      },
      extraCssText: 'background:red;background: rgba(17, 202, 190, 0.5);border: 1px solid rgba(17, 202, 190, 1);'
    },
    legend: {
      // left: '0%',
      top: '13%',
      right: '6%',
      icon: 'circle',
      itemHeight: 7,
      itemWidth: 7,
      itemGap: 20,
      align: 'left',
      textStyle: { //图例文字的样式
        color: '#fff',
        fontSize: '12px'
      },
      data: ['早Ca', 'Ca']
    },
    xAxis: {
      type: 'category',
      splitLine: {
        show: false // 去除网格线
      },
      axisLine: {
        show: true,
        lineStyle:{
            color: '#2B534D',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: 'rgba(256,256,256,0.7)', //坐标值的颜色
      },
      data: ['', '', '']
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true, // 去除网格线
        lineStyle: {
          color: 'rgba(27, 68, 54, 0.7)',
          type: 'dashed' //设置间隔线为虚线
        }
      },
      axisTick: {
        show: false //小横线
      },
      splitArea: {
        // show: true // 保留网格区域
      },
      axisLine: {
        show: false, // 去除纵向边框线
        lineStyle: {}
      },
      axisLabel: {
        show:true,
        color: 'rgba(59, 157, 165, 1)',
        margin: 30,
        align: 'left',
      },
      minInterval: 1
    },

    series: [
      {
        name: '早Ca',
        type: 'bar',
        barWidth:'12px',
        data: [80,60,50],
        barGap: '100%',
        itemStyle: {
            borderRadius: [20,20,0,0],
        },
        label:{
            show:false,
        },
      },
      {
        name: 'Ca',
        type: 'bar',
        barWidth:'12px',
        data: [50,40,80],
        itemStyle: {
            borderRadius: [20,20,0,0],
        },
        label:{
            show:false,
        },
      }
    ]
  }

柱状图3：
在这里插入图片描述

import * as echarts from 'echarts'
let option = {
    grid: {   // 直角坐标系内绘图网格
        left: '25',  //grid 组件离容器左侧的距离,
        //left的值可以是80这样具体像素值，
        //也可以是'80%'这样相对于容器高度的百分比
        top: '40',
        right: '25',
        // bottom: '10',
        containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
        // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
        //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    xAxis: {  //直角坐标系grid中的x轴,
        //一般情况下单个grid组件最多只能放上下两个x轴,
        //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
        type: 'value',//坐标轴类型,分别有：
        //'value'-数值轴；'category'-类目轴;
        //'time'-时间轴;'log'-对数轴
        splitLine: { show: false },//坐标轴在 grid 区域中的分隔线
        axisLabel: { show: false },//坐标轴刻度标签
        axisTick: { show: false },//坐标轴刻度
        axisLine: { show: false },//坐标轴轴线
    },
    yAxis: {
        type: 'category',
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        max: 100,
    },
    series: [//系列列表。每个系列通过 type 决定自己的图表类型
        {
            name: '%',//系列名称
            type: 'bar',//柱状、条形图
            //   barWidth: 10,//柱条的宽度,默认自适应
            data: [80],//系列中数据内容数组
            itemStyle: {//图形样式
                //emphasis图形在高亮状态下的样式
                borderRadius: 10,//柱条圆角半径,单位px.
                //此处统一设置4个角的圆角大小;
                //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                        offset: 0,
                        color: 'rgba(17, 202, 190, 0.5)'//柱图渐变色起点颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(17, 202, 190, 1)'//柱图渐变色终点颜色
                    }
                    ]
                )
            },
            label: {
                show: true,
                formatter: '',
                backgroundColor: '#fff',
                width: 6,
                height: 6,
                position: 'right',
                offset: [-7, 0],
                borderWidth: 7,
                borderColor: 'rgba(24, 125, 128, 0.5)',
                borderRadius: 7,
                // shadowColor:'#fff',
                shadowBlur: 30
            },
            showBackground: true,
            silent: true,
            barWidth: 4,
            barGap: '-100%', // Make series be overlap

            zlevel: 1//柱状图所有图形的 zlevel 值,
            //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        },
        {
            name: '进度条背景',
            type: 'bar',
            //   barGap: '-100%',//不同系列的柱间距离，为百分比。
            // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
            // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
            //并且是对此坐标系中所有 'bar' 系列生效。
            barWidth: 8,
            data: [100],
            color: 'rgba(36,245,249,0.2)',
            itemStyle: {
                borderRadius: 10
            }
        }
    ]
}

折线图1：在这里插入图片描述

import * as echarts from 'echarts'
let option = {
  legend:{
    show: true,
    icon: 'circle',
    itemHeight: '10',
    top: 200,
    left: 30,
    textStyle: {
      fontFamily: 'PingFangSC-Regular',
      fontWeight: '400',
      fontSize: '14px',
      color: 'rgba(202, 255, 255, 0.7)',
      letterSpacing: '0',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(17, 202, 190, 0.5)',
        type: 'dashed',
        width: 1
      },
    },
    textStyle: {
      color: "white" //设置文字颜色
    },
    extraCssText: 'background:red;background: rgba(17, 202, 190, 0.5);border: 1px solid rgba(17, 202, 190, 1);'
  },
  formatter: function (params) {
    // console.log(params);
    let rehtml = params[0].axisValue;
    for (let i in params) {
      rehtml += '<br/>' + params[i].marker + params[i].seriesName + '  ' + params[i].value + "%"
    }
    return rehtml;
  },
  grid: {
    left: '2%',
    right: '6%',
    top: '10%',
    bottom: '30%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    splitLine: {
      show: false // 去除网格线
    },
    axisLine: {
      show: true,
      lineStyle:{
          color: '#2B534D',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      margin: 10,
      fontFamily: 'PingFangSC-Regular',
      fontWeight: '400',
      fontSize: '13px',
      color: '#95BBBA',
      letterSpacing: '0',
    },
    data: ['25周','26周','27周','28周','29周','30周','31周','32周','33周','34周']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      color: 'rgba(59, 157, 165, 1)',
      margin: 30,
      align: 'left',
    },
    splitLine: {
      show: true, // 去除网格线
      lineStyle: {
        color: 'rgba(27, 68, 54, 0.7)',
        type: 'dashed' //设置间隔线为虚线
      }
    },
  },
  series: [
    {
      name: '食管癌早期诊断率',
      type: 'line',
      smooth: true,
      symbol: "circle",
      symbolSize:3,
      showSymbol: false,
      itemStyle: {
        color: 'rgba(36, 108, 249, 1)',
      },
      data: [50,45,48,41,25,48,56,45,54,49]
    },
    {
      name: '消化内镜检查完整率',
      type: 'line',
      smooth: true,
      symbol: "circle",
      symbolSize:3,
      showSymbol: false,
      itemStyle: {
        color: 'rgba(17, 202, 190, 1)',
      },
      data: [50,51,52,53,50,56,54,55,48,53]
    },
    {
      name: '胃癌早期诊断率',
      type: 'line',
      smooth: true,
      symbol: "circle",
      symbolSize:3,
      showSymbol: false,
      itemStyle: {
        color: 'rgba(195, 170, 132, 1)',
      },
      data: [40,41,42,43,40,46,44,45,38,43]
    },
    {
      name: '磁控胶囊胃镜检查完整率',
      type: 'line',
      smooth: true,
      symbol: "circle",
      symbolSize:3,
      showSymbol: false,
      itemStyle: {
        color: 'rgba(188, 118, 118, 1)',
      },
      data: [30,24,26,23,54,23,69,87,54,10]
    },
  ]
}

盒须图+折线图+柱状图+参考线
在这里插入图片描述

let option = {
    title: {
        text: '各地区结肠镜检查肠道准备优良率',
        top: '24px',
        left: '24px',
        textStyle: {
            fontFamily: 'PingFangSC-Regular',
            fontWeight: '400',
            fontSize: '18px',
            color: '#D5E3FF',
            letterSpacing: '1px',
        },
    },
    legend:{
        show: true,
        data:[
            {
                name:'指标分位数',
                icon:"image://./images/boxplot.png"
            },
            {
                name:'均值',
                icon:"image://./images/line.png"
            },
        ],
        top: '7.5%',
        right: '17%',
        itemHeight: 16,
        itemWidth: 20,
        itemGap: 30,
        textStyle:{
            fontFamily: 'PingFangSC-Regular',
            fontWeight: '400',
            fontSize: '14px',
            color: '#7DC1F5',
            letterSpacing: '0',
        },
    },
    dataset: [
        // {
        //     source: [
        //         [850, 740, 900, 1070, 930],
        //         [960, 940, 1100, 900, 730],
        //         [800, 830, 900, 860, 720],
        //         [900, 880, 760, 830, 1000],
        //         [1300, 500, 780, 810, 900],
        //     ],
        // },
        // {
        //     transform: {
        //         type: 'boxplot',
        //         config: { 
        //             itemNameFormatter: function (value) {
        //                 // console.log(value);
        //                 let xArr = ['山东省','浙江省','四川省','广东省','内蒙古']
        //                 return xArr[value.value]
        //             },
        //         },
        //     },
        // },
        // {
        //     fromDatasetIndex: 1,
        //     fromTransformResult: 1,
        // },
        // {
        //     source: {
        //         name:['山东省','浙江省','四川省','广东省','内蒙古'],
        //         value:[900,800,900,1000,800]
        //     }
        // },
    ],
    tooltip: {
       show:true,
       trigger: 'axis',
       axisPointer: {
           type: 'line',
           lineStyle: {
               color: 'rgba(63,114,223,0.2)',
               type: 'solid',
               width: 80
           },
       },
       textStyle: {
           fontFamily: "PingFangSC-Regular",
           fontWeight: "400",
           fontSize: "16px",
           color: "#FFFFFF",
       },
       extraCssText: 'background:red;background: #24499F;border: 1px solid #3F72DF;',
       formatter:function(params){
           // console.log(params);
           let ckline = "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#6C3E5E;\"></span>"
           if(params.length==4){
               return [
                   params[0].name,
                   isNaN(params[0].value[5])?params[0].marker+"upper：0.00%":params[0].marker+"upper: " + params[0].value[5].toFixed(2)+'%',
                   isNaN(params[0].value[4])?params[0].marker+"Q3：0.00%":params[0].marker+"Q3: " + params[0].value[4].toFixed(2)+'%',
                   isNaN(params[0].value[3])?params[0].marker+"median：0":params[0].marker+"median: " + params[0].value[3].toFixed(2)+'%',
                   isNaN(params[0].value[2])?params[0].marker+"Q1：0.00%":params[0].marker+"Q1: " + params[0].value[2].toFixed(2)+'%',
                   isNaN(params[0].value[1])?params[0].marker+"lower：0.00%":params[0].marker+"lower: " + params[0].value[1].toFixed(2)+'%',
                   params[1].value[1]?params[1].marker+'均值: '+ params[1].value[1]+'%':params[1].marker+'均值: 0%',
                   that.keyVal?ckline+'参考值: '+ that.keyVal+'%':ckline+'参考值: 0%',
                   params[2].value[1]?params[2].marker+that.zhibiaoFMname+': '+ params[2].value[1]:params[2].marker+that.zhibiaoFMname+': 0',
               ].join("<br/>");
           }else{
               return [
                   params[0].name,
                   isNaN(params[0].value[5])?params[0].marker+"upper：0.00%":params[0].marker+"upper: " + params[0].value[5].toFixed(2)+'%',
                   isNaN(params[0].value[4])?params[0].marker+"Q3：0.00%":params[0].marker+"Q3: " + params[0].value[4].toFixed(2)+'%',
                   isNaN(params[0].value[3])?params[0].marker+"median：0":params[0].marker+"median: " + params[0].value[3].toFixed(2)+'%',
                   isNaN(params[0].value[2])?params[0].marker+"Q1：0.00%":params[0].marker+"Q1: " + params[0].value[2].toFixed(2)+'%',
                   isNaN(params[0].value[1])?params[0].marker+"lower：0.00%":params[0].marker+"lower: " + params[0].value[1].toFixed(2)+'%',
                   params[1].value[1]?params[1].marker+'异常点: '+ (params[1].value[1]*1).toFixed(2)+'%':params[1].marker+'异常点: 0%',
                   params[2].value[1]?params[2].marker+'均值: '+ params[2].value[1]+'%':params[2].marker+'均值: 0%',
                   that.keyVal?ckline+'参考值: '+ that.keyVal+'%':ckline+'参考值: 0%',
                   params[3].value[1]?params[3].marker+that.zhibiaoFMname+': '+ params[3].value[1]:params[3].marker+that.zhibiaoFMname+': 0',
               ].join("<br/>");
           }
       }
    },
    grid: {
        left: '0%',
        right: '2.5%',
        top: '25%',
        bottom: '10%',
        containLabel: true
    },
    dataZoom:{
        brushSelect:false,
        type: 'slider',
        show: true,
        startValue: 0,
        height:10,
        endValue: 6,
        left:30,
        right:30,
        bottom:10,
        borderColor: "transparent",
        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
        showDataShadow: false,//是否显示数据阴影 默认auto
        showDetail: true,//即拖拽时候是否显示详细数值信息 默认true
        fillerColor:'#183273', // 可移动滚动条的颜色填充
        zoomLock:true, // 不让滚动条进行两头缩放
        handleStyle: { // 滚动条中间的样式
            color: 'transparent',
            shadowBlur: 3,
            shadowColor: 'transparent',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
            background: "#ddd",
            borderColor: "transparent",
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        nameGap: 30,
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: true,
            fontFamily: 'PingFangSC-Regular',
            fontWeight: '400',
            fontSize: '16px',
            color: '#B6DFFF',
            letterSpacing: '0',
            textAlign: 'center',
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle:{
                color: '#364A7D',
            },
        },
    },
    yAxis: [
        {
            type: 'value',
            splitLine: {
                show: false, // 去除网格线
                lineStyle: {
                    color: 'rgba(27, 68, 54, 0.7)',
                    type: 'dashed' //设置间隔线为虚线
                },
            },
            axisTick: {
                show: false //小横线
            },
            splitArea: {
                show: true, // 保留网格区域
                areaStyle:{
                    color: ['rgba(255,255,255,0.01)','rgba(255,255,255,0.05)']
                },
            },
            axisLine: {
                show: false, // 去除纵向边框线
                lineStyle: {}
            },
            axisLabel: {
                show:true,
                fontFamily: 'PingFangSC-Regular',
                fontWeight: '400',
                fontSize: '12px',
                color: '#246CF9',
                letterSpacing: '0',
                margin: 0,
                align: 'left',
                formatter: '{value}%',
            },
        },
        {
            type: 'value',
            splitLine: {
                show: false, // 去除网格线
            },
            axisTick: {
                show: false //小横线
            },
            splitArea: {
                show: false, // 保留网格区域
            },
            axisLine: {
                show: false, // 去除纵向边框线
            },
            axisLabel: {
                show:false,
            },
        },
        {
            type: 'value',
            splitLine: {
                show: false, // 去除网格线
            },
            axisTick: {
                show: false //小横线
            },
            splitArea: {
                show: false, // 保留网格区域
            },
            axisLine: {
                show: false, // 去除纵向边框线
            },
            axisLabel: {
                show:false,
            },
        },
    ],
    series: [
        {
            name: '指标分位数',
            type: 'boxplot',
            datasetIndex: 1,
            yAxisIndex: 2,
            boxWidth: '24',
            z: 0,
            itemStyle:{
                color: 'transparent',
                borderColor: '#7DC1F5',
                borderWidth: 2,
            },
        },
        {
            // name: '病例数',
            type: 'scatter',
            datasetIndex: 2,
            yAxisIndex: 2,
            symbolSize: 8,
            z: 1,
            itemStyle:{
                color: '#246CF9',
            },
            // tooltip:{show:false,}
        },
        {
            name: '均值',
            type: 'line',
            z: 2,
            datasetIndex: 3,
            symbol: "circle",
            symbolSize: 6,
            yAxisIndex: 0,
            markLine: {
                name: "参考值" ,
                symbol: "none",
                silent: true,
                lineStyle: { // 警戒线样式
                    type: "solid",
                    color: "#6C3E5E",
                },
                label: {
                    position: "start",
                },
                data: [
                    {
                        yAxis: 1100,
                        label: {
                            show: false,
                            position: "",
                        },
                    },
                ],
            },
            itemStyle: {
                color: "#30E0A1",
            },
            lineStyle:{
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                width:1.5//设置线条粗细
            },
            // tooltip:{show:false,}
        },
        {
            // name: "背景",
            type: "bar",
            barWidth: 52,
            yAxisIndex: 1,
            barGap: "-165%",
            datasetIndex: 3,
            itemStyle: {
                color: "rgba(36, 108, 249, 0.2)",
            },
            // tooltip:{show:false,},
        },
        {
            name: '参考值',
            type: 'line',
            datasetIndex: 1,
            yAxisIndex: 2,
            itemStyle: {
                color: "rgba(36, 108, 249, 0)",
            },
            markLine: {
                symbol: "none",
                silent: true,
                lineStyle: { // 警戒线样式
                    type: "solid",
                    color: "#6C3E5E",
                },
                label: {
                    position: "start",
                },
                data: [
                    {
                        yAxis: 1100,
                        label: {
                            show: false,
                            position: "",
                        },
                    },
                ],
            },
        },
    ]
}

折线图+堆叠柱状图：
在这里插入图片描述

let option = {
    color:['#E3988E','#9F91FF','#2CC6FF','#5B93FF','#FFB545','#30E0A1'].reverse(),
    title:{
        text:'结肠镜检查肠道准备优良率指标走势',
        top: '24px',
        left: '24px',
        textStyle: {
            fontFamily: 'PingFangSC-Regular',
            fontWeight: '400',
            fontSize: '18px',
            color: '#D5E3FF',
            letterSpacing: '1px',
        },
    },
    grid:{
        left: '2%',
        right: '2%',
        top: '38%',
        bottom: '10%',
        containLabel: true,
    },
    legend:[
        {
            show: true,
            data:[],
            top: '15%',
            right: '2%',
            itemHeight: 10,
            itemWidth: 18,
            itemGap: 30,
            textStyle:{
                fontFamily: 'PingFangSC-Regular',
                fontWeight: '400',
                fontSize: '14px',
                color: '#7DC1F5',
                letterSpacing: '0',
            },
        },
        {
            show: true,
            data:['均值分子','均值分母'],
            top: '22%',
            right: '2%',
            itemHeight: 15,
            itemWidth: 10,
            itemGap: 30,
            textStyle:{
                fontFamily: 'PingFangSC-Regular',
                fontWeight: '400',
                fontSize: '14px',
                color: '#7DC1F5',
                letterSpacing: '0',
            },
        }
    ],
    tooltip: {
        trigger: 'axis',
        // formatter:function(e){
        //     console.log(e);
        // },
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: 'rgba(63,114,223,0.2)',
                type: 'solid',
                width: 52
            },
        },
        textStyle: {
            color: "white" //设置文字颜色
        },
        extraCssText: 'background:red;background: rgba(63,114,223,0.5);border: 1px solid #3F72DF;'
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        nameGap: 30,
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: true,
            fontFamily: 'PingFangSC-Regular',
            fontWeight: '400',
            fontSize: '16px',
            color: '#B6DFFF',
            letterSpacing: '0',
            textAlign: 'center',
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle:{
                color: '#364A7D',
            },
        },
        data:[],
    },
    yAxis: [
        {
            max:'100',
            min:'50',
            maxInterval: 40,
            interval:10,
            type: 'value',
            splitLine: {
                show: false, // 去除网格线
            },
            axisTick: {
                show: false //小横线
            },
            splitArea: {
                show: false, // 保留网格区域
            },
            axisLine: {
                show: false, // 去除纵向边框线
                lineStyle: {}
            },
            axisLabel: {
                show:true,
                fontFamily: 'PingFangSC-Regular',
                fontWeight: '400',
                fontSize: '12px',
                color: '#246CF9',
                letterSpacing: '0',
                margin: 5,
                interval: 'auto',  
                // formatter: '{value} %',
                formatter: function (params) {
                    // console.log(params);
                    if(params>=0&&params<=100){
                        return params+'%'
                    }
                },
            },
        },
        {
            type: 'value',
            splitLine: {
                show: false, // 去除网格线
            },
            axisTick: {
                show: false //小横线
            },
            splitArea: {
                show: true, // 保留网格区域
                areaStyle:{
                    color: ['rgba(255,255,255,0.01)','rgba(255,255,255,0.05)']
                },
            },
            axisLine: {
                show: false, // 去除纵向边框线
                lineStyle: {}
            },
            axisLabel: {
                show:true,
                fontFamily: 'PingFangSC-Regular',
                fontWeight: '400',
                fontSize: '12px',
                color: '#246CF9',
                letterSpacing: '0',
                margin: 5,
                align: 'left',
            },
        },
    ],
    dataZoom:{
        brushSelect:false,
        type: 'slider',
        show: true,
        startValue: 0,
        height:10,
        endValue: 9,
        left:30,
        right:30,
        bottom:10,
        borderColor: "transparent",
        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
        showDataShadow: false,//是否显示数据阴影 默认auto
        showDetail: true,//即拖拽时候是否显示详细数值信息 默认true
        fillerColor:'#183273', // 可移动滚动条的颜色填充
        zoomLock:true, // 不让滚动条进行两头缩放
        handleStyle: { // 滚动条中间的样式
            color: 'transparent',
            shadowBlur: 3,
            shadowColor: 'transparent',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
            background: "#ddd",
            borderColor: "transparent",
        },
    },
    series:[
        {
            // name: '均值分母',
            type: 'bar',
            yAxisIndex: 1,
            data:[10,20,30,40,50,60],
            barWidth: '16',
            z: 0,
            itemStyle:{
                color: '#246CF9',
            },
            stack: 'total',
        },
        {
            // name: '均值分子',
            type: 'bar',
            yAxisIndex: 1,
            data:[10,30,10,20,20,10],
            barWidth: '16',
            z: 0,
            itemStyle:{
                color: 'rgba(36,108,249,0.3)',
                borderRadius:[4,4,0,0],
            },
            stack: 'total',
        },
        // {
        //     name: "背景",
        //     type: "bar",
        //     barWidth: 52,
        //     barGap: "-210%",
        //     yAxisIndex: 1,
        //     data:[100,100,100,100,100,100],
        //     z: 0,
        //     itemStyle: {
        //         color: "rgba(36, 108, 249, 0.2)",
        //     },
        //     tooltip:{show:false,},
        //     legend:{show:false,},
        // },
        // {
        //     name: '折线图',
        //     type: 'line',
        //     symbol: 'circle',
        //     yAxisIndex: 0,
        //     z: 1,
        //     data:[70,80,90,100,60,70],
        //     symbolSize: 8,
        //     itemStyle: {
        //         color: "#30E0A1",
        //     },
        //     lineStyle:{
        //         type: "solid", //设置网格线类型 dotted：虚线   solid:实线
        //         width:1.5//设置线条粗细
        //     },
        // },
    ],
}

在这里插入图片描述

let colorList = ['#11CABE','#24A0F9','#246CF9','#5C4CBA','#B6DFFF']
            this.zllbmyChart = this.$echarts.init(document.getElementById('Diagnosisworkload'))
            let option = {
                title: {
                    show: false,
                },
                legend: { //有哪几个类别
                    show: false,
                },
                tooltip: {
                    show: true,
                    textStyle: {
                        color: "white" //设置文字颜色
                    },
                    // formatter:'{d}%',
                    formatter: (params) => {
                        // console.log(params);
                        return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:${params.color}"></span>${params.name} ${params.value + ' %'}`
                    },
                    extraCssText: 'background:red;background: rgba(26,54,138,0.8);border: 1px solid #90B6FF;'
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['60%', '75%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: "#0F1454",
                        color: function(params) {
                            return colorList[params.dataIndex]
                        },
                    },
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: (params) => {
                            // console.log(params,'这里这里');
                            //暂时写的死的
                            if (params.name == 'EUS') {
                                return '{a|' + params.name + '}\n{d|' + this.fenziArr[0]+'}{text|/'  + this.fenmuArr[0]+'}'
                            } else if(params.name == 'ERCP') {
                                return '{a|' + params.name + '}\n{d|' + this.fenziArr[1]+'}{text|/'  + this.fenmuArr[1]+'}'
                            }else if(params.name == '肠镜') {
                                return '{a|' + params.name + '}\n{d|' + this.fenziArr[2]+'}{text|/'  + this.fenmuArr[2]+'}'
                            }else if(params.name == '胃镜') {
                                return '{a|' + params.name + '}\n{d|' + this.fenziArr[3]+'}{text|/'  + this.fenmuArr[3]+'}'
                            }else if(params.name == '其他') {
                                return '{a|' + '其他' + '}\n{d|' + this.fenziArr[4]+'}{text|/'  + this.fenmuArr[4]+'}'
                            }
                        },
                        rich: {
                            a: {
                                fontSize: '14',
                                fontWeight: '500',
                                padding: [5, 6, 0, 0],
                                color: 'inherit'
                            },
                            d: {
                                fontSize: '14',
                                fontFamily: 'DINPro',
                                padding: [10, 0, 0, 0],
                                color: '#fff',
                            },
                            text: {
                                fontSize: '14',
                                padding: [10, 0, 0, 0],
                                color: '#11CABE',
                            },
                        }
                    },
                    labelLine: {
                        length: 0,
                        length2: 50,
                        smooth: 1.5,
                        lineStyle: {
                            width: 1,
                        },
                        
                    },
                    data: [
                        {name:'EUS',value:this.zllb1},
                        {name:'ERCP',value:this.zllb2},
                        {name:'肠镜',value:this.zllb3},
                        {name:'胃镜',value:this.zllb4},
                        {name:'其他',value:this.zllb5},
                    ],
                }, ]
            }
树叶有翅膀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值