console 命令行工具 X clear

console

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: 'ECharts'
  },
  legend: {},
  tooltip: {},
  dataset: {
        dimensions: ['product', '主叫白名单', '免打扰黑名单', '被叫黑名单'],
        source: [
            {product: '4月19日', '主叫白名单': 43.3, '免打扰黑名单': 85.8, '被叫黑名单': 93.7},
            {product: '4月20日', '主叫白名单': 83.1, '免打扰黑名单': 73.4, '被叫黑名单': 55.1},
            {product: '4月22日', '主叫白名单': 86.4, '免打扰黑名单': 65.2, '被叫黑名单': 82.5},
            {product: '4月23日', '主叫白名单': 72.4, '免打扰黑名单': 53.9, '被叫黑名单': 39.1}
        ]
    },
  xAxis: {
      type: 'category',
      triggerEvent:true
  },
  yAxis: {},
  series: [
    {type: 'bar'},
    {type: 'bar'},
    {type: 'bar'}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);


myChart.setOption(option);
myChart.on('mouseover', function (params) {
    if(params.componentType == "xAxis"){
        $("#dialog").show();
        var div=document.getElementById("dialog");
        div.style.left=(params.event.offsetX+20)+"px";
        div.style.top=(params.event.offsetY+20)+"px";
    }else{
        $("#dialog").hide();
    }
});

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;">
  </div>
  <div id="dialog" class="dialog">
      <div class="centent">
        <div class="title">图表信息</div>
        <div>
            <p>提示信息</p>
            <p>提示信息</p>
        </div>
      </div>
  </div>
</body>

.dialog{
    border: 1px solid #ebebeb;
    width: 100px;
    height: 80px;
    color: #fff;
    background-color: rgba(50, 50, 50, 0.7);
    font-size: 12px;
    display: none;
    overflow: hidden;
    position: absolute;
    border-radius: 5px;
}
.centent{
    padding-left: 10px;
    padding-top: 2px;
}

SOURCE

本项目引用的自定义外部资源