echarts cdn基础作图

最新推荐文章于 2024-07-01 13:16:29 发布

翘麦力

最新推荐文章于 2024-07-01 13:16:29 发布

阅读量458

点赞数

分类专栏： bootstrapandecharts 文章标签： echarts

本文链接：https://blog.csdn.net/Candx2/article/details/112214308

版权

bootstrapandecharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <title>Document</title>
  <style>
    div{
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="main"></div><!--一定要创建一个Dom空间-->
  <script>
    const my = echarts.init(document.getElementById('main'))
    const option ={
      title:{text:'This is my first echarts'},//标题
      color:["#003366"],//控制条状图等颜色
      tooltip:{},//提示信息
      legend:{//图里组件
        data:[{//组件数据
          name:'销量',//组件名称
          icon:'diamond',//组件图标
          textStyle:{//组件字体样式
            color:'green'
          }
        }]
      },
      xAxis:{//x轴
        data:['jijia','dadiao','qicaihong','huashuo','asdasd']
      },
      yAxis:{},//y轴
      series:[{//系列列表
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 50]
      }]
    }
    my.setOption(option)
  </script>
</body>
</html>

type类型
type: ‘bar’：柱状/条形图
type: ‘line’：折线/面积图
type: ‘pie’：饼图
type: ‘scatter’：散点（气泡）图
type: ‘effectScatter’：带有涟漪特效动画的散点（气泡）
type: ‘radar’：雷达图
type: ‘tree’：树型图
type: ‘treemap’：树型图
type: ‘sunburst’：旭日图
type: ‘boxplot’：箱形图
type: ‘candlestick’：K线图
type: ‘heatmap’：热力图
type: ‘map’：地图
type: ‘parallel’：平行坐标系的系列
type: ‘lines’：线图
type: ‘graph’：关系图
type: ‘sankey’：桑基图
type: ‘funnel’：漏斗图
type: ‘gauge’：仪表盘
type: ‘pictorialBar’：象形柱图
type: ‘themeRiver’：主题河流
type: ‘custom’：自定义系列

翘麦力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts cdn基础作图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> &
复制链接

扫一扫

专栏目录