Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts实现大事件左右分布效果图

let list = [
  {
    policy_country: '联合国',
    policy_time: '1987年',
    policy_title: '安理会598号决议',
  },
  {
    policy_country: '美国',
    policy_time: '1992年',
    policy_title: '美国九百余人涉嫌金融丑闻被判有罪',
  },
  {
    policy_country: '中国',
    policy_time: '1995年',
    policy_title: '广梅汕铁路全线贯通',
  },
  {
    policy_country: '中国',
    policy_time: '2008年',
    policy_title: '南水北调弃水入卢沟晓月湖 结束20年干涸史',
  },
  {
    policy_country: '中国',
    policy_time: '2010年',
    policy_title: '小明同学离职自主创业',
  },
  {
    policy_country: '法国',
    policy_time: '2012年',
    policy_title: '路易斯安那离职自主创业',
  },
  {
    policy_country: '德国',
    policy_time: '2013年',
    policy_title: 'MIKE MISS 辍学环游世界',
  },
  {
    policy_country: '葡萄牙',
    policy_time: '2015年',
    policy_title: '成功开始划水~~',
  }
];
let seriesList = [];
var yarr = [];
var linearr = [];
var linev = { value: -0, symbol: 'none' };

list.map((item, index) => {
  seriesList.push({
    date: item.policy_time,
    title: item.policy_title,
    country: item.policy_country,
    content: item.policy_content,
    value: 0,
    label: {
      show: true,
      lineHeight: 20,
      align: index % 2 == 0 ? 'left' : 'right',
      padding: 20,
      position: index % 2 == 0 ? 'left' : 'right',
      formatter: function (params) {
        return `{bolder|${params.name}}\n${params.data.title}`;
      },
      rich: {
        bolder: {
          fontSize: 14,
          fontWeight: 600,
          color: '#000',
        },
      },
    },
  });
});
seriesList.map((item, index) => {
  linearr.push({
    value: -0,
  });
  yarr.push(`${item.date}  ${item.country}`);
});
option = {
  grid: {
    top: 0,
    left: '50%',
    right: '30%',
    bottom: 0,
  },
  legend: {
    bottom: 0,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      padding: [2, 0, 0, 0],
    },
  },
  xAxis: {
    show: false,
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false },
    splitLine: { show: false },
    min: 0,
    max: 0,
  },
  yAxis: {
    type: 'category',
    axisLine: {
      show: true,
      lineStyle: {
        width: 3,
        color: '#389af4',
      },
    },

    axisTick: {
      show: false,
      alignWithLabel: true,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      margin: 30,
      alignWithLabel: true,
      show: false,
    },
    data: ['', ...yarr, ''],
  },
  color: ['#333'],
  series: [
    {
      type: 'line',
      symbolSize: 10,
      itemStyle: {
        color:'#389af4',
        borderColor:'#389af4',
        borderWidth: 2,
      },

      hoverAnimation: false,
      legendHoverLink: false,
      data: [linev, ...seriesList, linev],
      lineStyle: {
        color: '#389af4',
      },
    },
  ],
};

点击运行 》

点击展开全文

相关文章

  1. 百度Echarts公交线路实时进度
  2. 百度Echarts公司架构关系图
  3. 百度Echarts实现一个金字塔立体效果(漏斗图)
  4. 百度Echarts解决各种图表定时切换不冲突(重叠)
  5. 百度Echarts对点击事件进行判断

热门workflows工作流