Echarts 画3D立体柱状图

  • 在一个vue项目中使用到, 这边写个笔记记录下

  • 3d立体柱状图(单个柱子)


    单个柱子
// 立体柱状图
function threeDimensionalLine() {
  let divId = document.getElementById('元素id');
  let myChart = echarts.init(divId);
  // x y 用来设置柱状的大小
  const offsetX = 12;
  const offsetY = 6;
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint;
      // console.log(shape);
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - offsetX, shape.y - offsetY];
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    }
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
      const c4 = [shape.x + offsetX, shape.y - offsetY];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    }
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
      const c3 = [shape.x, shape.y - offsetX];
      const c4 = [shape.x - offsetX, shape.y - offsetY];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    }
  });
  // 注册三个面图形
  echarts.graphic.registerShape('CubeLeft', CubeLeft);
  echarts.graphic.registerShape('CubeRight', CubeRight);
  echarts.graphic.registerShape('CubeTop', CubeTop);

  const VALUE = [100, 200, 300, 400, 300, 200, 100];
  let option = {
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + ' : ' + item.value;
      }
    },
    grid: {
      top: '12%',
      left: '3%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['测试名字1', '测试名字2', '测试名字3', '测试名字4', '测试名字5', '测试名字6', '测试名字7'],
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#344761'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        rotate: 40,
        formatter: function (value) { // 自定义文字超出部分 ...
          if (value.length > 5) {
            return `${value.slice(0, 5)}...`;
          }
          return value;
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '签约完成率%',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#344761'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#172749'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'custom',
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: 'group',
            children: [
              {
                type: 'CubeLeft',
                barWidth: 20,
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#01f0ff'
                    },
                    {
                      offset: 1,
                      color: '#005559'
                    }
                  ])
                }
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#01f0ff'
                    },
                    {
                      offset: 1,
                      color: '#005559'
                    }
                  ])
                }
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#01f0ff'
                    },
                    {
                      offset: 1,
                      color: '#005559'
                    }
                  ])
                }
              }
            ]
          };
        },
        data: VALUE
      },
      {
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',
            fontSize: 16,
            color: '#fff',
            offset: [0, -5]
          }
        },
        itemStyle: {
          color: 'transparent'
        },
        tooltip: {},
        data: VALUE
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
};

  • 3d立体柱状图(多个柱子, 且自定义柱状图的弹出框 tooltip )


    多个柱子
// 多项立体柱状图
function threeDimensionalMoreBar() {
  let divId = document.getElementById('元素id');
  let myChart = echarts.init(divId);
  // 绘制左侧面
  const wid = 14;
  const w1 = Math.sin(Math.PI / 6) * wid; // 4
  const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
  const snapHeight = wid / 4;
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y - 2];
      const c1 = [shape.x - w2, shape.y - w1 + snapHeight - 2];
      const c2 = [shape.x - w2, xAxisPoint[1] - w1 + snapHeight - 2];
      const c3 = [shape.x, xAxisPoint[1] - 2];
      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    }
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y - 2];
      const c2 = [shape.x, xAxisPoint[1] - 2];
      const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight - 2];
      const c4 = [shape.x + w1, shape.y - w2 + snapHeight - 2];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    }
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y - 2];
      const c2 = [shape.x + w1, shape.y - w2 + snapHeight - 2]; // 右点
      const c3 = [shape.x - w2 + w1, shape.y - w1 - w2 + snapHeight * 2 - 2];
      const c4 = [shape.x - w2, shape.y - w1 + snapHeight - 2];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    }
  });
  // 注册三个面图形
  echarts.graphic.registerShape('CubeLeft', CubeLeft);
  echarts.graphic.registerShape('CubeRight', CubeRight);
  echarts.graphic.registerShape('CubeTop', CubeTop);

  const VALUE = [{value: 100, rate: 20}, {value: 70, rate: 70}, {value: 200, rate: 90}, {value: 200, rate: 90}];
  const VALUE2 = [{value: 30, rate: 40}, {value: 60, rate: 30}, {value: 100, rate: 80}, {value: 200, rate: 90}];
  const VALUE3 = [{value: 300, rate: 60}, {value: 100, rate: 60}, {value: 150, rate: 70}, {value: 200, rate: 90}];
  let option = {
    legend: {
      data: ['签约率', '腾空率', '拆除率'],
      selectedMode: false,
      right: '5%',
      top: '2%',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (data) {
        console.log(data);
        let total = data.reduce(function (total, currentValue, currentIndex, arr) {
          return total + currentValue.value;
        }, 0);
        let str = `<p style="font-size: 14px;font-weight: 600;color: #fff;text-align: center;margin-bottom: 5px;">总户数：${total}</p>`;
        data.reverse().forEach(item => {
          str += `<p style="margin-bottom: 5px;padding-left: 10px;padding-right: 10px;">${item.marker}签约率：${item.data.rate}%  ${item.seriesName}：${item.value}</p>`;
        });
        return str;
      }
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '5%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['测试名字1', '测试名字2', '测试名字3', '测试名字4'],
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#344761'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        formatter: function (value) { // 自定义文字超出部分 ...
          if (value.length > 13) {
            return `${value.slice(0, 12)}...`;
          }
          return value;
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '签约完成率%',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#344761'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#172749'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [{
      name: '签约率',
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        location[0] = location[0] + wid * (-2);
        const xlocation = api.coord([api.value(0), 0]);
        xlocation[0] = xlocation[0] + wid * (-2);
        return {
          type: 'group',
          children: [{
            type: 'CubeLeft',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#22c6fc'
              }, {
                offset: 1,
                color: '#052e44'
              }
              ])
            }
          }, {
            type: 'CubeRight',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#22c6fc'
              }, {
                offset: 1,
                color: '#052e44'
              }])
            }
          }, {
            type: 'CubeTop',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#22c6fc'
              }, {
                offset: 1,
                color: '#052e44'
              }])
            }
          }]
        };
      },
      color: '#22c6fc',
      data: VALUE
    }, {
      name: '腾空率',
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        location[0] = location[0] + wid * 0;
        const xlocation = api.coord([api.value(0), 0]);
        xlocation[0] = xlocation[0] + wid * 0;
        return {
          type: 'group',
          children: [{
            type: 'CubeLeft',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fdc81e'
              }, {
                offset: 1,
                color: '#464704'
              }])
            }
          }, {
            type: 'CubeRight',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fdc81e'
              }, {
                offset: 1,
                color: '#464704'
              }])
            }
          }, {
            type: 'CubeTop',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fdc81e'
              }, {
                offset: 1,
                color: '#464704'
              }])
            }
          }]
        };
      },
      color: '#fdc81e',
      data: VALUE2
    }, {
      name: '拆除率',
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        location[0] = location[0] + wid * 2;
        const xlocation = api.coord([api.value(0), 0]);
        xlocation[0] = xlocation[0] + wid * 2;
        return {
          type: 'group',
          children: [{
            type: 'CubeLeft',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#27e6ab'
              }, {
                offset: 1,
                color: '#03302f'
              }])
            }
          }, {
            type: 'CubeRight',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#27e6ab'
              }, {
                offset: 1,
                color: '#03302f'
              }])
            }
          }, {
            type: 'CubeTop',
            shape: {
              api,
              xValue: api.value(0),
              yValue: api.value(1),
              x: location[0],
              y: location[1],
              xAxisPoint: xlocation
            },
            style: {
              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#27e6ab'
              }, {
                offset: 1,
                color: '#03302f'
              }])
            }
          }]
        };
      },
      color: '#27e6ab',
      data: VALUE3
    }]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
}

  • 3d立体柱状图自定义每根柱子的颜色


    自定义每根柱子的颜色
function threeDimensionaBarCustomColor(divId) {
  let divId = document.getElementById('元素id');
  let myChart = echarts.init(divId);
  // x y 用来设置柱状的大小
  const offsetX = 12;
  const offsetY = 6;
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint;
      // console.log(shape);
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - offsetX, shape.y - offsetY];
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
    }
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
      const c4 = [shape.x + offsetX, shape.y - offsetY];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    }
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
      const c3 = [shape.x, shape.y - offsetX];
      const c4 = [shape.x - offsetX, shape.y - offsetY];
      ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    }
  });
  // 注册三个面图形
  echarts.graphic.registerShape('CubeLeft', CubeLeft);
  echarts.graphic.registerShape('CubeRight', CubeRight);
  echarts.graphic.registerShape('CubeTop', CubeTop);

  const VALUE = [100, 200, 300];
  let option = {
    // backgroundColor: '#012366',
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + ' : ' + item.value;
      }
    },
    grid: {
      top: '12%',
      left: '3%',
      right: '5%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['已签约户数', '已腾空户数', '已拆除户数'],
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#344761'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '户',
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: '#344761'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#172749'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'custom',
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          // 自定义每根柱状的颜色, 通过柱子的下表来判定
          let CubeLeftColor = [{ offset: 0, color: '#22c6fc' }, { offset: 1, color: '#052e44' }];
          if (params.dataIndex === 0) {
            CubeLeftColor = [{ offset: 0, color: '#22c6fc' }, { offset: 1, color: '#052e44' }];
          } else if (params.dataIndex === 1) {
            CubeLeftColor = [{ offset: 0, color: '#fdc81e' }, { offset: 1, color: '#464704' }];
          } else {
            CubeLeftColor = [{ offset: 0, color: '#27e6ab' }, { offset: 1, color: '#03302f' }];
          }
          console.log(params.dataIndex);
          return {
            type: 'group',
            children: [
              {
                type: 'CubeLeft',
                barWidth: 20,
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, CubeLeftColor)
                }
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, CubeLeftColor)
                }
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0])
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, CubeLeftColor)
                }
              }
            ]
          };
        },
        data: VALUE
      },
      {
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',
            fontSize: 16,
            color: '#fff',
            offset: [0, -5]
          }
        },
        itemStyle: {
          color: 'transparent'
        },
        tooltip: {},
        data: VALUE
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
};
Tip:
// 添加该段代码, 当页面大小发生变化时, echarts 会进行自适应
window.addEventListener('resize', function () {
  myChart.resize();
});
  • 当在vue是中使用 echarts 时, 自定义 echarts 的弹出框 tooltip, 在里面添加的点击事件需要挂在到 window 对象上才会生效
image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,658评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,482评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,213评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,395评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,487评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,523评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,525评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,300评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,753评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,905评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,541评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2赞 352

推荐阅读更多精彩内容