echarts

最新推荐文章于 2024-03-25 10:15:00 发布

weixin_44343449

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量101

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/weixin_44343449/article/details/95725647

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

柱状图

<body>
  <div style="width:500px;height:400px" id = "main">

  </div>

</body>
<script>
  //创建echarts对象。
  var main = document.getElementById("main")
  var mychart = echarts.init(main)
  //创建配置项
  var option = {
    title:{text:"echarts案例"},
    toolbox:{show:true,feature:{
      saveAsImage:{show:true},
      }},
    tooltip:{},//悬浮提示框
    legend:{data:["销量"]},
    xAxis:{data:["文学","科技","天文","地理"]},
    yAxis:{},
    series:[{
      name:"销量",type:"bar",data:[1000,800,9000,5500]
    }]
  }
  //将配置项应用到echarts对象。
  mychart.setOption(option)
</script>

//折线和柱状综合图

  //创建echarts对象。
  var main = document.getElementById("main")
  var mychart = echarts.init(main)
  //创建配置项
  /*var option = {
    title:{text:"echarts案例"},
    toolbox:{show:true,feature:{
      saveAsImage:{show:true},
      }},
    tooltip:{},//悬浮提示框
    legend:{data:["销量"]},
    xAxis:{data:["文学","科技","天文","地理"]},
    yAxis:{},
    series:[{
      name:"销量",type:"bar",data:[1000,800,9000,5500]
    }]
  }*/
  var option = {
    title:{text:"折线图"},
    toolbox:{show:true,feature:{
      saveAsImage:{show:true},
        dataView: {show:true},//将数据显示在表格里
        restore:{show:true},//还原
        dataZoom:{show:true},//进行区域缩放。
        magicType: {type:["line","bar"]}//柱状和折线切换
      }},
    legend:{data:["销量"]},
    xAxis:{data:["裤子","袜子","衬衫","毛衣","围脖"]},
    yAxis:{},
    series:[{
      name:"销量",type:"line",data:[4,5,11,2,9]
    },
      {
        name:"库存",type:"bar",data:[20,35,81,20,19]
      }
    ]
  }
  //将配置项应用到echarts对象。
  mychart.setOption(option)

饼状图

  var option = {
    series:[{
      type:"pie",
      radius:"50%",
      center:["50%","50%"],
      data:[
        {value:450,name:'广告'},
        {value:550,name:'房子'},
        {value:250,name:'装修'},
        {value:250,name:'工作'},
      ]
    }]
  }