1. <script src="lib/echarts.min.js"></script>
  2. <body>
  3.     <!--  步骤2：准备一个呈现图表的盒子 -->
  4.     <div style="width: 600px;height: 400px;" id="main"></div>
  5.     <script>
  6.         //  步骤3：初始化echarts实例对象
  7.         // init函数中的参数是一个Dom元素。这个Dom元素就决定了图表最终呈现的位置
  8.         var myCharts = echarts.init(document.getElementById('main'))
  9.         // 步骤4：准备配置项
  10.         var option = {
  11.             // x轴
  12.             xAxis:{
  13.                 type:'category',
  14.                 data:['小明','小红','小王']
  15.             },
  16.             // y轴
  17.             yAxis:{
  18.                 type:'value'
  19.             },
  20.             series:[
  21.                 {
  22.                     name:'语文',
  23.                     // 柱状图的type是bar
  24.                     type:'bar',
  25.                     // data代表小明，小红，小王这三个人的成绩分别是多少，是一一对应 的关系
  26.                     data:[70,92,87]
  27.                 }
  28.             ]
  29.         }
  30.         //  步骤5：将配置项设置给echarts实例对象
  31.         myCharts.setOption(option)
  32.     </script>
  33. </body>

相关配置讲解

xAxis:直角坐标徐中的x轴
yAxis:直角坐标徐中的y轴
series：系列列表，每个系列通过type决定自己的图表类型
可以通过series中的type属性决定图表的类型

  1.  series:[
  2.                {
  3.                  name:'语文',
  4.                  // 柱状图的type是bar
  5.                  // type:'bar',
  6.                  // 折线图
  7.                  // type:'line',
  8.                  // 饼图
  9.                  type:'pie',
  10.                  // data代表小明，小红，小王这三个人的成绩分别是多少，是一一对应 的关系
  11.                  // 这里data的值和上面的xAxis轴中data里面的值是一一对应关系
  12.                  data:[70,92,87]
  13.                }
  14.             ]
  1.  var option = {
  2.             // x轴
  3.             xAxis:{
  4.                 // type的复制为category，代表类目轴，表示需要指定x轴上的属性
  5.                 type:'category',
  6.                 // 上面是类目轴，下面的data就是x轴要显示的内容
  7.                 data:['小明','小红','小王']
  8.             },
  9.             // y轴
  10.             yAxis:{
  11.                 // 此时type复制为value代表数值轴，不需要单独为他设置好data，y轴慧
  12.                 type:'value'
  13.             },
  14.             series:[
  15.                 {
  16.                     name:'语文',
  17.                     // 柱状图的type是bar
  18.                     // type:'bar',
  19.                     // 折线图
  20.                     // type:'line',
  21.                     // 饼图
  22.                     type:'pie',
  23.                     // data代表小明，小红，小王这三个人的成绩分别是多少，是一一对应 的关系
  24.                     // 这里data的值和上面的xAxis轴中data里面的值是一一对应关系
  25.                     data:[70,92,87]
  26.                 }
  27.             ]
  28.         }

对于不同图表，其他的四步都是一样的，只有option中的配置项是不同的。

echarts中常见图表

常见的图表:柱状图，折线图，散点图，饼图，地图，雷达图，仪表盘图

柱状图

期末语文成绩

image.png

创建过程

image.png

实现

  1. <script src="./echarts.min.js"></script>
  2. <body>
  3.     <div id="main" style="width:600px; height: 400px;"></div>
  4.     <script>
  5.         var myCharts = echarts.init(document.getElementById('main'))
  6.         var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强']
  7.         var yDataArr = [88,92,63,77,94,80,72,86]
  8.         var option = {
  9.             xAxis:{
  10.                 type:'category',
  11.                 data: xDataArr
  12.             },
  13.             yAxis:{
  14.                 type:'value'
  15.             },
  16.             series:[
  17.                 {
  18.                     name:'语文',
  19.                     type:'bar',
  20.                     data:yDataArr
  21.                 }
  22.             ]
  23.         }
  24.         myCharts.setOption(option)
  25.     </script>
  26. </body>

常见效果

标记：最大值，最小值，平均值
显示:数值显示(label)，柱的宽度(barWidth)，横向柱状图
横向柱状图就是x轴和y轴互换，从左往右验证

横向图

  1. <body>
  2.     <div id="main" style="width:600px; height: 400px;"></div>
  3.     <script>
  4.         var myCharts = echarts.init(document.getElementById('main'))
  5.         var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强']
  6.         var yDataArr = [88,92,63,77,94,80,72,86]
  7.         var option = {
  8.             xAxis:{
  9.                 // type:'category',
  10.                 type:'value',
  11.                 // data: xDataArr
  12.             },
  13.             yAxis:{
  14.                 // type:'value'
  15.                 type:'category',
  16.                 data:xDataArr
  17.             },
  18.             series:[
  19.                 {
  20.                     name:'语文',
  21.                     type:'bar',
  22.                     data:yDataArr,
  23.                     // 通过这个就把这些学生中的得分最高和得分最低的同学标记出来了
  24.                     markPoint:{
  25.                         data:[
  26.                             {
  27.                                 type:'max',
  28.                                 name:'最大值'
  29.                             },
  30.                             {
  31.                                 type:'min',
  32.                                 name:'最小值'
  33.                             }
  34.                         ]
  35.                     },
  36.                     markLine:{
  37.                         data:[
  38.                             {
  39.                                 name:'平均分',
  40.                                 type:'average'
  41.                             }
  42.                         ]
  43.                     },
  44.                     label:{
  45.                         show:true,
  46.                         position:'top',
  47.                         rotate:60
  48.                     },
  49.                     barWidth:'50%'
  50.                 }
  51.             ]
  52.         }
  53.         myCharts.setOption(option)
  54.     </script>
  55. </body>

image.png

小结

image.png

通用配置

标题：title

文字样式

标题边框

标题位置

  1.  title:{
  2.         text:'成绩展示',
  3.         textStyle:{
  4.           color:'red'
  5.         },
  6.         borderWidth:5,
  7.         borderColor:'blue',
  8.         borderRadius:5,
  9.         // 标题位置
  10.         left:50,
  11.         top:10
  12.         },

提示：tooltip

提示框组件，用于配置鼠标滑过或者点击图表时的显示框

触发类型（trigger）

两个可选值：item和axis
image.png

触发时机（triggerOn）

两个可选值：mouseover和click
mouseover代表鼠标移动的过程中就会有提示框出现
click代表只有鼠标点击的时候提示框才会出现
image.png

格式化（formatter)

formatter的内容会决定提示框的内容，formatter里面写的是什么提示框就提示什么

字符串模板

image.png

image.png

回调函数

image.png

工具按钮：toolbox

导出图片

数据重置

区域缩放

动态图表类型切换

toolbox是echarts提供的工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

  1.  toolbox: { // 工具箱按钮
  2.    feature:{
  3.      // 导出图片的功能
  4.      saveAsImage:{},
  5.        // 数据视图功能，查看绘制该图表的原始数据
  6.      dataView :{},
  7.          // 数据重置
  8.      restore:{},
  9.            // 区域缩放
  10.      dataZoom:{},
  11.              // 动态图表类型的切换
  12.              magicType :{
  13.                type:[
  14.                  // 该数组中决定究竟是在哪一个图表类型之间切换
  15.                  // 如果想让图形在折线图和柱状图之间切换的话
  16.                  'bar','line'
  17.                ]
  18.              }
  20.    }
  21.  },

image.png
image.png

图例：legend

legend是图例，用于筛选系列，需要和series配合使用
legend中的data是一个数组
legend中的data的值需要和series数组中某组数据的name值一致
可以对系列进行筛选，筛选出到底是语文的数据还是数学的数据
image.png
image.png