echarts使用基础

1,下载并引入echarts.js文件

2,准备一个具备大小(有宽和高)DOM容器

3,初始化echarts实例对象

4,指定配置项和相关数据(option)

5,将配置项设置给echarts实例对象

下载入口:

官网->下载->Dist

找到echarts.min.js,下载到对应文件夹

实例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                background-color: pink;
            }
        </style>
  </head>
  <body>
    <div class="box"></div>
    <script src="js/echarts.min.js"></script>
    <script>
        //初始化实例对象  echarts.init(dom容器)
        var myChart=echarts.init(document.querySelector(".box"));
        //指定配置项和数据
        var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      //把配置项给实例对象
      myChart.setOption(option);
    </script>
  </body>
</html>

效果:

echarts配置基础简介:

html 复制代码
option = {
  //color设置线条的颜色 注意后面是一个数组
  color:['pink','red','green','skyblue','orange'],
  title: {
    text: 'Stacked Line'
  },
  tooltip: {//是否显示提示框组件
    trigger: 'axis'//坐标轴触发,item数据项图形触发
  },
  //图例主键
  legend: {
   //data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
   //series中有对应的name,legend中的data可以删掉
  },
  //网格配置 可以控制图表大小
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true//是否显示刻度标签
  },
  //工具箱组件,可以另存为图片
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  //设置x轴
  xAxis: {
    type: 'category',//类目
    boundaryGap: false,//线条是否紧贴坐标轴
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  //系列图表,决定显示图表类型
  series: [
    {
      name: 'Email',
      type: 'line',
      //stack: 'Total',//数据堆叠,不需要就删掉
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
相关推荐
CodeSheep2 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员6 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc14 分钟前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii6616 分钟前
120html
前端
.生产的驴17 分钟前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无24 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding30 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒34 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码1 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6