echarts基本使用

数据可视化

什么是数据可视化？

可视化的实现方式：

1.报表类 excel、水晶报表

2.商业智能BI Microsoft BI、Power-BI

3.编码类 ECharts.js、D3.js

ECharts的基本使用

1.引入echarts.js文件

  <script src="lib/echarts.min.js"></script>

2.准备一个呈现图表的盒子

  <div style="width: 600px;height: 400px"></div>

3.初始化echarts实例对象

echarts.init()
var mCharts = echarts.init(document.querySelector('div'))

4.准备配置项

    var option = {
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 92, 87]
        }
      ]
    }

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

mCharts.setOption(option)

相关配置

title:

title: {
        text: '成绩', // 标题文字
        link: 'http://www.itcast.cn', // 标题超链接
        textStyle: { // 标题样式设置
          color: 'red' // 标题文字
        }
      },

• 文字样式 textstyle

• 标题边框 borderWidth borderColor borderRadius

• 标题位置 left、top、right、bottom

xAxis:直角坐标系中的x轴

xAxis: {
  type: 'category',  // 指明x轴为 类目轴
  data: ['小明', '小红', '小王'] // 为类目轴提供数据, 该数据是一个数组, 数组中的每个元素会呈现在x轴上
      },

yAxis:直角坐标系中的y轴

yAxis: {
   type: 'value'  // 指明y轴为 数值轴, 指明数值轴之后, 无需指定data
      },

series:

series: [
    {
          name: '语文', // 为图标起一个名称
          type: 'bar', // 指明该图标类型为 柱状图
          data: [70, 92, 87] // 为x轴的每一个元素, 指明呈现在y轴的数值,
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
           label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
        }
      ]

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

• 触发类型：trigger

  item、axis

• 触发时机：triggerOn

  mouseover、click

• 格式化：formatter

  字符串模板、回调函数

toolbox：ECharts提供的工具栏

• 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

      toolbox: { // 工具箱按钮
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },

• 显示工具栏按钮 feature

  saveAslmage、dataView、restore、dataZoom、magicType

legend :有多个科目就进行分类，用于筛选系列，需要和series

legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
    data: ['语文', '数学']
      },
series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        }
      ]

折线图

• 最大值最小值

  markPoint: { // 标记点
              data: [
                {
                  type: 'max'
                },
                {
                  type: 'min'
                }
              ]
            },

  • 平均值

    markLine: { // 标记线
                data: [
                  {
                    type: 'average'
                  }
                ]
              },  

• 标注区间

            markArea: { // 标记区域
              data: [
                [
                  {
                    xAxis: '1月'
                  },
                  {
                    xAxis: '2月'
                  }
                ],
                [
                  {
                    xAxis: '7月'
                  },
                  {
                    xAxis: '8月'
                  }
                ]
              ]
            },

  smooth: true, // 是否为平滑线

lineStyle: { // 线的样式设置

color: 'green',

type: 'solid' // dashed dotted solid

},

areaStyle: { // 线和x轴形成的区域设置

color: 'pink'

}

boundaryGap: false // x轴的第1个元素是否与y轴有距离

略略略太无聊了

自定义主题

1.在线编辑主题

加载动画

ECharts已经内置好了加载数据的动画，我们只需要再合适的实际显示或者隐藏即可

• 显示加载动画

  mCharts.showLoading()

• 隐藏加载动画

  mCharts.hideLoading()