echarts柱状图自定义提示框效果代码

代码语言:html

所属分类:图表

代码描述:echarts柱状图自定义提示框效果代码

代码标签: echarts柱状图 自定义 提示框

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  


</head>

<body >
  <div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.js"></script>
      <script>
// myChart.setOption(frequencyChartoption);
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById("main"));

// specify chart configuration item and data
var option = {
  backgroundColor: {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
    {
      offset: 0.25,
      color: "grey" // color at 0% position
    },
    {
      offset: 0.75,
      color: "#f4f4f4" // color at 100% position
    }]

    // global: false // false by default
  },
  title: {
    text: "ECharts entry example" },

  tooltip: {
    show: true,
    trigger: "axis",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    formatter: params => {
      // create new marker
      var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0