Echarts

最新推荐文章于 2025-03-27 16:57:07 发布
最新推荐文章于 2025-03-27 16:57:07 发布
阅读量1.1k 收藏 2
点赞数
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45911285/article/details/125883059
版权

文章目录

1.柱状图

var name = ['故意伤害', '盗窃', '交通肇事', '酒驾'];
var count = [60, 80, 75, 64];
option = {
  xAxis: {
    type: 'category',
    data: name
  },
  yAxis: {
    type: 'value'
  },
  // xAxis: { //横向显示
  //   type: 'value',
  //   data: name
  // },
  // yAxis: {
  //   type: 'category'
  // },
  series: [
    {
      name: '案件数量',
      type: 'bar',
      smooth: true, //平滑曲线
      data: count ,
      label: {
        //显示柱上字体
        show: true,
        rotate: 50, // 柱上字的角度
        position: 'inside' // 柱上字的位置
      },
      barWidth: '30%', // 柱的宽度
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      }
    }
  ]
};

示例
在这里插入图片描述

2.通用配置

1. 标题:title

2.提示:tooltip

var name = ['故意伤害', '盗窃', '交通肇事', '酒驾'];
var count = [60, 80, 75, 64];
option = {
  // title
  title: {
    text: '案件统计',
    // 文字样式
    textStyle: {
      color: 'black'
    },
    // 标题边框
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 2,
    left: 10, // 标题位置
    top: 10
  },

  // tooltip提示
  tooltip: {
    // trigger: 'item'// 触发类型
    trigger: 'axis', // 坐标轴触发
    // triggerOn:'click' // 触发时机
    triggerOn: 'onmousemove',
    // formatter: '{b}的数量为:{c}' // formatter {b}为类名,{c}为value
    formatter: (arg) => {
      //自定义tooltip提示内容 // 可以通过arg获取当前事件对象的值
      // console.log(arg)
      return `${arg[0].axisValue}的数量是:${arg[0].data}`;
    }
  },

  xAxis: {
    type: 'category',
    data: name
  },
  yAxis: {
    type: 'value'
  },
  // xAxis: { //横向显示
  //   type: 'value',
  //   data: name
  // },
  // yAxis: {
  //   type: 'category'
  // },
  series: [
    {
      name: '案件数量',
      type: 'bar',
      smooth: true, //平滑曲线
      data: count,
      label: {
        //显示柱上字体
        show: true,
        rotate: 50, // 柱上字的角度
        position: 'inside' // 柱上字的位置
      },
      barWidth: '30%', // 柱的宽度
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      }
    }
  ]
};

示例
在这里插入图片描述

3.工具按钮:toolbox

var name = ['故意伤害', '盗窃', '交通肇事', '酒驾'];
var count = [60, 80, 75, 64];
option = {
  // toolbox
  toolbox: {
    feature: {
      saveAsImage: {}, // 保存图片
      dataView: {}, // 数据视图
      restore: {}, // 重置
      dataZoom: {}, //区域缩放
      magicType: {
        type: ['line', 'bar']
      } // 动态图表类型切换
    }
  },
  // title
  title: {
    text: '案件统计',
    // 文字样式
    textStyle: {
      color: 'black'
    },
    // 标题边框
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 2,
    left: 10, // 标题位置
    top: 10
  },

  // tooltip提示
  tooltip: {
    trigger: 'item' // 触发类型
    // trigger: 'axis', // 坐标轴触发
    // triggerOn:'click' // 触发时机
    // triggerOn: 'onmousemove',
    // formatter: '{b}的数量为:{c}' // formatter {b}为类名,{c}为value
    // formatter: (arg) => {
    //   //自定义tooltip提示内容 // 可以通过arg获取当前事件对象的值
    //   // console.log(arg)
    //   return `${arg[0].axisValue}的数量是:${arg[0].data}`;
    // }
  },

  xAxis: {
    type: 'category',
    data: name
  },
  yAxis: {
    type: 'value'
  },
  // xAxis: { //横向显示
  //   type: 'value',
  //   data: name
  // },
  // yAxis: {
  //   type: 'category'
  // },
  series: [
    {
      name: '案件数量',
      type: 'bar',
      smooth: true, //平滑曲线
      data: count,
      label: {
        //显示柱上字体
        show: true,
        rotate: 50, // 柱上字的角度
        position: 'inside' // 柱上字的位置
      },
      barWidth: '30%', // 柱的宽度
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      }
    }
  ]
};

在这里插入图片描述

4. 图例:legend,用于筛选系列,需要配合series使用

在这里插入图片描述

var xName = ['故意伤害', '盗窃', '交通肇事', '酒驾']; // 案件类型名称
var yCount = [60, 80, 75, 64]; //案件数量统计
var yMenCount = [55, 60, 45, 60]; // 男性案件数量
var yWomenCount = [5, 20, 30, 4]; // 女性案件数量
option = {
  // legend 图例
  legend: {
    data: ['案件数量', '男性数量', '女性数量']
  },
  // toolbox
  toolbox: {
    feature: {
      saveAsImage: {}, // 保存图片
      dataView: {}, // 数据视图
      restore: {}, // 重置
      dataZoom: {}, //区域缩放
      magicType: {
        type: ['line', 'bar']
      } // 动态图表类型切换
    }
  },
  // title
  title: {
    text: '案件统计',
    // 文字样式
    textStyle: {
      color: 'black'
    },
    // 标题边框
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 2,
    left: 10, // 标题位置
    top: 10
  },

  // tooltip提示
  tooltip: {
    trigger: 'item' // 触发类型
    // trigger: 'axis', // 坐标轴触发
    // triggerOn:'click' // 触发时机
    // triggerOn: 'onmousemove',
    // formatter: '{b}的数量为:{c}' // formatter {b}为类名,{c}为value
    // formatter: (arg) => {
    //   //自定义tooltip提示内容 // 可以通过arg获取当前事件对象的值
    //   // console.log(arg)
    //   return `${arg[0].axisValue}的数量是:${arg[0].data}`;
    // }
  },

  xAxis: {
    type: 'category',
    data: xName
  },
  yAxis: {
    type: 'value'
  },
  // xAxis: { //横向显示
  //   type: 'value',
  //   data: xName
  // },
  // yAxis: {
  //   type: 'category'
  // },
  series: [
    {
      name: '案件数量',
      type: 'bar',
      smooth: true, //平滑曲线
      data: yCount,
      label: {
        //显示柱上字体
        show: true,
        rotate: 50, // 柱上字的角度
        position: 'inside' // 柱上字的位置
      },
      // barWidth: '30%', // 柱的宽度
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      },
      markPoint: {
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      }
    },
    {
      name: '男性数量',
      type: 'bar',
      data: yMenCount,
      smooth: true //平滑曲线
    },
    {
      name: '女性数量',
      type: 'bar',
      data: yWomenCount,
      smooth: true //平滑曲线
    }
  ]
};

在这里插入图片描述

3.折线图

在这里插入图片描述

var xName = ['故意伤害', '盗窃', '交通肇事', '酒驾']; // 案件类型名称
var xMonth = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] //月份数据
var yMonthCount = [20,30,35,22,5,22,14,14,9,10,11,10] //每月案件数据统计
var yCount = [60, 80, 75, 64]; //案件数量统计
var yMenCount = [55, 60, 45, 60]; // 男性案件数量
var yWomenCount = [5, 20, 30, 4]; // 女性案件数量
option = {
  xAxis:{
    type:'category',
    data:xMonth,
  },
  yAxis:{
    type:'value'
  },
  series:[
    {
      name:'案件数量统计',
      data:yMonthCount,
      type:'line',
      smooth:true,
    },  
  ],
}

在这里插入图片描述

1.常见效果(最大值,最小值,平均值与柱状图一样,多了一个标注区间效果)

MarkPoint, MarkLine,markarea

2.标注区间

markarea

3.填充风格

在这里插入图片描述

var xName = ['故意伤害', '盗窃', '交通肇事', '酒驾']; // 案件类型名称
var xMonth = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月'
]; //月份数据
var yMonthCount = [2, 10, 15, 17, 5, 9, 14, 15, 9, 10, 11, 10]; //每月案件数据统计
var yCount = [60, 80, 75, 64]; //案件数量统计
var yMenCount = [55, 60, 45, 60]; // 男性案件数量
var yWomenCount = [5, 20, 30, 4]; // 女性案件数量
option = {
  xAxis: {
    type: 'category',
    data: xMonth
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '案件数量统计',
      data: yMonthCount,
      type: 'line',
      smooth: true, // 线条平滑风格
      lineStyle: {
        // 线条样式
        color: 'green',
        // type:'dashed', // 小线段
        type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      },
      areaStyle: {
        color: 'lightgreen'
      }, // 线段区域填充风格
      markPoint: {
        data: [
          {
            type: 'max' // 最大值
          },
          {
            type: 'min' // 最小值
          }
        ]
      },
      markLine: {
        data: [
          {
            type: 'average' //平均值
          }
        ]
      },
      markArea: {
        //标注区域
        data: [
          [
            {
              xAxis: '1月'
            },
            {
              xAxis: '2月'
            }
          ],
          [
            {
              xAxis: '5月'
            },
            {
              xAxis: '6月'
            }
          ]
        ]
      }
    }
  ]
};

在这里插入图片描述

4.紧挨边缘

在这里插入图片描述
在这里插入图片描述

5.缩放(脱离0值比例)

在这里插入图片描述

6.堆叠图

areaStyle:{},

暂存1

var xName = ['故意伤害', '盗窃', '交通肇事', '酒驾']; // 案件类型名称
var xMonth = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月'
]; //月份数据
var yMonthCount = [2, 10, 15, 17, 5, 9, 14, 15, 9, 10, 11, 10]; //每月案件数据统计
var yMenCount = [2, 8, 10, 13, 4, 7, 10, 12, 7, 8, 9, 7]; // 男性案件数量
var yWomenCount = [0, 2, 5, 4, 1, 2, 4, 3, 2, 2, 2, 3]; // 女性案件数量
var yGYSH = [1, 2, 5, 7, 1, 4, 5, 10, 4, 3, 1, 3]; //每月故意伤害案件数据统计
var yDQ = [1, 4, 7, 9, 1, 5, 5, 1, 4, 3, 2, 4]; //每月盗窃案件数据统计
var yJTZS = [0, 1, 1, 1, 1, 2, 1, 2, 1, 2, 5, 2]; //每月交通肇事案件数据统计
var yJJ = [0, 3, 2, 0, 2, 2, 3, 2, 0, 2, 2, 1]; //每月酒驾案件数据统计
// var yCount = [60, 80, 75, 64]; //案件数量统计
// var yMenCount = [55, 60, 45, 60]; // 男性案件数量
// var yWomenCount = [5, 20, 30, 4]; // 女性案件数量
option = {
  // title
  title: {
    text: '案件统计',
    // 文字样式
    textStyle: {
      color: 'black'
    }
    // 标题边框
    // borderWidth: 1,
    // borderColor: 'gray',
    // borderRadius: 2,
    // left: 10, // 标题位置
    // top: 10
  },
  // toolbox
  toolbox: {
    feature: {
      saveAsImage: {}, // 保存图片
      dataView: {}, // 数据视图
      restore: {}, // 重置
      dataZoom: {}, //区域缩放
      magicType: {
        type: ['line', 'bar']
      } // 动态图表类型切换
    }
  },
  legend: {
    data: [
      '酒驾案件',
      '交通肇事案件',
      '盗窃案件',
      '故意伤害案件',
      '男性案件数量',
      '女性案件数量',
      '案件数量合计'
    ]
  },
  // tooltip提示
  tooltip: {
    // trigger: 'item'// 触发类型
    trigger: 'axis' // 坐标轴触发
    // triggerOn:'click' // 触发时机
    // triggerOn: 'onmousemove',
    // formatter: '{b}的数量为:{c}' // formatter {b}为类名,{c}为value
    // formatter: (arg) => {
    //   //自定义tooltip提示内容 // 可以通过arg获取当前事件对象的值
    //   // console.log(arg)
    //   return `${arg[0].axisValue}的数量是:${arg[0].data}`;
    // }
  },
  xAxis: {
    type: 'category',
    data: xMonth,
    boundaryGap: false // 紧挨边缘
  },
  yAxis: {
    type: 'value',
    scale: true //缩放(脱离0值比例)
  },
  series: [
    {
      name: '女性案件数量',
      data: yWomenCount,
      type: 'line',
      //       label: {
      //   //显示柱上字体
      //   show: true,
      //   rotate: 50, // 柱上字的角度
      //   position: 'inside' // 柱上字的位置
      // },
      // barWidth: '20%', // 柱的宽度
      smooth: true,
      lineStyle: {
        // 线条样式
        color: 'green',
        // type:'dashed', // 小线段
        type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      }
    },
    {
      name: '男性案件数量',
      data: yMenCount,
      type: 'line',
      //       label: {
      //   //显示柱上字体
      //   show: true,
      //   rotate: 50, // 柱上字的角度
      //   position: 'inside' // 柱上字的位置
      // },
      // barWidth: '20%', // 柱的宽度
      smooth: true,
      lineStyle: {
        // 线条样式
        color: 'green',
        // type:'dashed', // 小线段
        type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      }
    },
    {
      name: '酒驾案件',
      data: yJJ,
      type: 'bar'
      //       label: {
      //   //显示柱上字体
      //   show: true,
      //   rotate: 50, // 柱上字的角度
      //   position: 'inside' // 柱上字的位置
      // },
      // barWidth: '20%', // 柱的宽度
      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '交通肇事案件',
      data: yJTZS,
      type: 'bar'
      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '盗窃案件',
      data: yDQ,
      type: 'bar'
      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '故意伤害案件',
      data: yGYSH,
      type: 'bar'

      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '案件数量合计',
      data: yMonthCount,
      type: 'line',
      borderColor: 'red',
      borderWidth: '50%',
      smooth: true, // 线条平滑风格
      lineStyle: {
        // 线条样式
        color: 'green'
        // type:'dashed', // 小线段
        // type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      },
      // areaStyle: {
      //   color: 'lightgreen'
      // }, // 线段区域填充风格
      markPoint: {
        data: [
          {
            type: 'max', // 最大值
            name: '最大值'
          },
          {
            type: 'min', // 最小值
            name: '最小值'
          }
        ]
      },
      markLine: {
        data: [
          {
            type: 'average', //平均值
            name: '平均值'
          }
        ]
      }

      // markArea: {
      //   //标注区域
      //   data: [
      //     [
      //       {
      //         xAxis: '1月'
      //       },
      //       {
      //         xAxis: '2月'
      //       }
      //     ],
      //     [
      //       {
      //         xAxis: '5月'
      //       },
      //       {
      //         xAxis: '6月'
      //       }
      //     ]
      //   ]
      // }
    }
  ]
};

在这里插入图片描述

暂存2

var xName = ['故意伤害', '盗窃', '交通肇事', '酒驾']; // 案件类型名称
var xMonth = [
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月'
]; //月份数据
var yMonthCount =   [2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 34]; //每月案件数据统计
var yGYSH =         [1, 2, 2, 3,  4,  4,  5,  6,  7, 8, 10, 11]; //每月故意伤害案件数据统计
var yDQ =           [1, 2, 2, 3,  3,  5,  5,  6,  8, 9, 10, 11]; //每月盗窃案件数据统计
var yJTZS =         [0, 0, 1, 1,  1,  2,  1,  2,  2, 3, 4, 5]; //每月交通肇事案件数据统计
var yJJ =           [0, 0, 1, 1,  2,  2,  3,  2,  3, 4, 4, 7]; //每月酒驾案件数据统计
var yMenCount =     [2, 3, 3, 6,  8, 10, 12, 13, 14, 16, 20, 24]; // 男性案件数量
var yWomenCount =   [0, 1, 3, 2,  2,  2,  2, 3,   6,  8,  8, 10]; // 女性案件数量
// var yCount = [60, 80, 75, 64]; //案件数量统计
// var yMenCount = [55, 60, 45, 60]; // 男性案件数量
// var yWomenCount = [5, 20, 30, 4]; // 女性案件数量
option = {
  // title
  title: {
    text: '案件数量趋势',
    // 文字样式
    textStyle: {
      color: 'black'
    }
    // 标题边框
    // borderWidth: 1,
    // borderColor: 'gray',
    // borderRadius: 2,
    // left: 10, // 标题位置
    // top: 10
  },
  // toolbox
  toolbox: {
    feature: {
      saveAsImage: {}, // 保存图片
      dataView: {}, // 数据视图
      restore: {}, // 重置
      dataZoom: {}, //区域缩放
      magicType: {
        type: ['line', 'bar']
      } // 动态图表类型切换
    }
  },
  legend: {
    data: [
      '酒驾案件',
      '交通肇事案件',
      '盗窃案件',
      '故意伤害案件',
      '男性案件数量',
      '女性案件数量',
      '案件数量合计'
    ]
  },
  // tooltip提示
  tooltip: {
    // trigger: 'item'// 触发类型
    trigger: 'axis' // 坐标轴触发
    // triggerOn:'click' // 触发时机
    // triggerOn: 'onmousemove',
    // formatter: '{b}的数量为:{c}' // formatter {b}为类名,{c}为value
    // formatter: (arg) => {
    //   //自定义tooltip提示内容 // 可以通过arg获取当前事件对象的值
    //   // console.log(arg)
    //   return `${arg[0].axisValue}的数量是:${arg[0].data}`;
    // }
  },
  xAxis: {
    type: 'category',
    data: xMonth,
    boundaryGap: false // 紧挨边缘
  },
  yAxis: {
    type: 'value',
    scale: true //缩放(脱离0值比例)
  },
  series: [
    {
      name: '女性案件数量',
      data: yWomenCount,
      type: 'line',
      stack:'all',
      // areaStyle:{}, // 堆叠
      //       label: {
      //   //显示柱上字体
      //   show: true,
      //   rotate: 50, // 柱上字的角度
      //   position: 'inside' // 柱上字的位置
      // },
      // barWidth: '20%', // 柱的宽度
      smooth: true,
      lineStyle: {
        // 线条样式
        color: 'green',
        // type:'dashed', // 小线段
        type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      }
    },
    {
      name: '男性案件数量',
      data: yMenCount,
      type: 'line',
     
      //       label: {
      //   //显示柱上字体
      //   show: true,
      //   rotate: 50, // 柱上字的角度
      //   position: 'inside' // 柱上字的位置
      // },
      // barWidth: '20%', // 柱的宽度
      smooth: true,
stack:'all',// 堆叠
// areaStyle:{},
      lineStyle: {
        // 线条样式
        color: 'green',
        // type:'dashed', // 小线段
        type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      }
    },
    {
      name: '酒驾案件',
      data: yJJ,
      type: 'bar',

      //       label: {
      //   //显示柱上字体
      //   show: true,
      //   rotate: 50, // 柱上字的角度
      //   position: 'inside' // 柱上字的位置
      // },
      // barWidth: '20%', // 柱的宽度
      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '交通肇事案件',
      data: yJTZS,
      type: 'bar',

      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '盗窃案件',
      data: yDQ,
      type: 'bar',

      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '故意伤害案件',
      data: yGYSH,
      type: 'bar',

      // smooth:true,
      //     lineStyle: {
      //   // 线条样式
      //   color: 'green',
      //   // type:'dashed', // 小线段
      //   type: 'dotted' // 点状线
      //   // type:'solid' // 实线 ,默认
      // },
    },
    {
      name: '案件数量合计',
      data: yMonthCount,
      type: 'line',
      borderColor: 'red',
      borderWidth: '50%',
      smooth: true, // 线条平滑风格
      stack:'all',
      // areaStyle:{},
      lineStyle: {
        // 线条样式
        color: 'green'
        // type:'dashed', // 小线段
        // type: 'dotted' // 点状线
        // type:'solid' // 实线 ,默认
      },
      // areaStyle: {
      //   color: 'lightgreen'
      // }, // 线段区域填充风格
      markPoint: {
        data: [
          {
            type: 'max', // 最大值
            name: '最大值'
          },
          {
            type: 'min', // 最小值
            name: '最小值'
          }
        ]
      },
      markLine: {
        data: [
          {
            type: 'average', //平均值
            name: '平均值'
          }
        ]
      }

      // markArea: {
      //   //标注区域
      //   data: [
      //     [
      //       {
      //         xAxis: '1月'
      //       },
      //       {
      //         xAxis: '2月'
      //       }
      //     ],
      //     [
      //       {
      //         xAxis: '5月'
      //       },
      //       {
      //         xAxis: '6月'
      //       }
      //     ]
      //   ]
      // }
    }
  ]
};

在这里插入图片描述

暂存3

1.饼图
option = {
  toolbox: {
    feature: {
      saveAsImage: {},
      dataView: {},
      restore: {},
      dataZoom: {},
      magicType: ['bar', 'line'
            ]
        }
    },
  title: [
        {
      text: '案件类型占比',
      subtext: '截止2022-01-02',
      left: 'center'
        },
        {
      text: '40',
      textStyle: {
        color: '#22ac38',
        fontSize: 40
            },
      itemGap: 20,
      left: '46%',
      top: '40%'
        },
        {
      text: '总计案件数',
      textStyle: {
        color: '#444444',
        fontSize: 35,
        fontWeight: 'normal'
            },
      itemGap: 20,
      left: '41.5%',
      top: '50%'
        }
    ],
  grid: [
        {
      top: '10%',
      width: '50%',
      left: '45%',
      containLabel: true
        }
    ],
  tooltip: {
    trigger: 'item'
    },
  legend: {
    orient: 'vertical',
    left: 'left'
    },
  series: [
        {
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'
            ],
      data: [
                { value: 5, name: '故意伤害'
                },
                { value: 12, name: '交通肇事'
                },
                { value: 12, name: '抢夺'
                },
                { value: 5, name: '贪污'
                },
                { value: 6, name: '受贿'
                }
            ],
      emphasis: {
        label: {
          show: true,
          formatter: '{a|{b
                        }
                    }\n{hr|
                    }\n{c|{c
                        }
                    }{u1|件
                    }      {per|{d
                        }
                    }{u2|%
                    }',
          rich: {
            a: {
              color: '#000',
              lineHeight: 30,
              fontSize: 20,
              align: 'left'
                        },
            hr: {
              borderColor: '#245ECF',
              width: '100%',
              borderWidth: 1,
              height: 0,
              borderType: 'dashed'
                        },
            c: {
              lineHeight: 40,
              fontSize: 20
                        },
            u1: {
              fontSize: 12,
              lineHeight: 18
                        },
            per: {
              fontSize: 20,
              lineHeight: 40
                        },
            u2: {
              fontSize: 12,
              lineHeight: 18
                        }
                    }
                },
        labelLine: {
          length: 0,
          length2: 0,
          lineStyle: {
                        // type: 'dashed',
            width: 2
                        // color:'transparent'
                    }
                },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,
                    0,
                    0,
                    0.5)'
                }
            }
        }
    ]
};
echarts-5.4.3
03-02
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它基于 SVG+Canvas 技术，提供了丰富的图表类型、灵活的交互功能以及高度自定义的可能性。ECharts 5.4.3 版本是该库的一个稳定版本，包含了之前版本的所有...
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
在Echarts图中给坐标轴加一个标识线markLine
11-20
Echart3数据可视化视图 给坐标轴加一个标识线markLine 当X轴不是数值时，而是一个类型数据，如年份，公司名，企业名，这时Echarts图就不是从X轴起始位置开始的，所以我们就要给X轴加一个虚拟的值’0’，在markLine中也是在赋值起始位置X轴值时，放置虚拟数据，并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0，这时标示线就从X轴起始位置开始了，详细属性可以去Echarts官网查看。 这里还要说一句在设置markLine下面data值时{x:”,//代表的是容器内x的值，y:”,容器内y的值}，如果要设置在坐标轴内的标示线，就要设置xAxis和yAxis
echarts 标记线markLine的使用
逆风优雅的博客
08-04 1万+
效果图： 在某个值处添加一条分割线。markLine写在 serise中。
echarts折线图绘制markLine出现坐标偏移问题
最新发布
qq_45246017的博客
03-27 262
经过各种排查，最后锁定原因是，我的X轴类型为category，在这个类型时，渲染markLine的坐标coord索引为0的值也就是与x轴对应的值，应该使用字符串类型，而我使用的是接口返回的Number类型，在手动转换后，解决了这个问题。在使用markLine的coord实现两个坐标之间的标线绘制时，发现绘制的图标标线在折线图上出现无序的偏移。本该在位置1的图标渲染到了位置2，但是打印查看coord的坐标是正确的。
echarts的markLine 图表标线使用
weixin_63681863的博客
01-17 8101
官网介绍。
ehcarts绘制横向/纵向辅助线（markLine）
weixin_46917162的博客
10-20 7196
【代码】ehcarts绘制横向/纵向辅助线（markLine）
echarts之markLine(可以设置特定阈值线(警戒线))
热门推荐
fjxtgdx的博客
08-09 1万+
这个markLine在之前的自定义不等分y轴文章中说到了，这里又用到了，就顺便说下。自己笔记，仅供参考，互相探讨，共同进步。
ECharts 5.4.2 离线中文文档
01-06
ECharts 5.4.2 离线中文文档 注意访问路径，确保访问地址为 http://xxxxxxxx:xxx/echarts-website，其中 echarts-website 是写死的路径。 解压密码：https://gitee.com/mfkvfhpdx/echarts-doc nginx中启动，在server...
echarts.min.js
10-24
ECharts 是百度开源的一个数据可视化工具包，基于 JavaScript 进行开发。ECharts 能够非常便捷地在网页上实现绚丽的图表效果，帮助用户通过数据可视化的形式进行有效数据解读。ECharts.min.js 是 ECharts 库的一个...
echarts中国地图JSON资源
10-10
ECharts中国地图JSON资源是一种为ECharts图表库提供中国地图形状和属性数据的JSON文件。ECharts是由百度开源的一个强大的数据可视化工具，它提供直观、生动、可交互、可高度个性化定制的数据可视化图表。使用ECharts...
echarts图表标线-markLine(阈值线、警戒线)+箭头
buzhidjiaosha的博客
12-29 4486
series里面添加markLine。
echarts的markline警标线（一条/多条）的使用
蓝胖子的博客
10-18 7141
echarts的markline警标线（一条/多条）的使用
echarts markline
weixin_42213796的博客
10-29 1508
添加垂直于x轴的两条辅助线：发现markline中的data属性中，xAxis对应的坐标为数值时，需要填写的并不是x轴对应的数值，而是当前x轴对应柱形图在所有柱形图中的比例。 series: [ { name:'占比', type:'line', yAxisIndex: 1, data:this.echartsData.cumCount, markL...
echarts的MarkLin控制
AspirinZero的博客
06-28 1076
动态添加我的实现思路是，
echarts显示markLine
前端小白到专家的博客
01-13 3843
在echarts中显示markLine，代码正常设置就是不显示markLine线。原因有以下几点：1.markline的数值超出纵坐标范围。2.markline设置的时候echarts图表中没有数据，这时候需要先设置markLine线，然后获取echarts，再次设置显示就可以了。
使用echarts中markLine来实现图表标线
YL
02-12 1万+
使用echarts中markLine来实现图表标线
echarts的标线（markLine）、折线分段变色（visualMap）、区域变色（markArea）
weixin_43885814的博客
11-29 8249
echarts的标线、折线分段变色、区域变色说明个人对echars的理解案例说明示意图页面代码标线 markLine折线分段变色 visualMap区域变色 markArea遇到问题不识别字符型的数字出现白屏formatter函数 说明 个人对echars的理解 echars图的option我理解的是本质就是一个json，你可以写入不同的参数，echarts给解析成你想要的样式。你可以在开始的时候定义一个json，然后在功能里对这个json进行修改，或者写一个函数来得到你想要的json数据。 案例说明 这个
echarts移动markline（拖拽单条markline）
qq_44309969的博客
11-21 2193
图表中需要一个移动的标线，辅助观察图表；
Echarts时间轴刻度优化与自适应实现
Echarts（即Apache ECharts）是一个使用JavaScript实现的开源可视化库，提供了直观、生动、可交互、高度可定制的数据可视化图表。对于时间序列数据的可视化，Echarts提供了一个强大的组件——时间轴（Timeline），它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wei13013451000

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值