【Echarts 图表】echarts基础

文章目录

    • 一、Echarts
      • 1、echarts简单案例
      • 2、echarts.init() 方法
      • 3、series 系列(option配置项)
        • 柱状图
        • 折线图
        • 饼图
      • 4、dataset 数据源
      • 5、标题
      • 6、legend 图例
      • 7、toolbox 工具
      • 8、dataZoom
      • 9、grid 控制图表位置

一、Echarts

基于 4.0

1、echarts简单案例

// 1. 获取容器DOM元素
const chartDOM = document.getElementById('chart);
// 2. 初始化图表实例 
/**
 * init 方法
 *   参数1:要渲染的DOM
 *   参数2:主题配色
 *   参数3:以canvas渲染还是svg渲染(Echarts 4.0才有)
 *   数据量大:用canvas
 *   数据量少:用svg(内存占用低,渲染性能略微高,缩放不失帧,对移动端更友好)
 */
const chart = echarts.init(chartDOM, 'dark', { renderer: 'svg' });

// 3. 配置项
const option = {
  title: {
    text: 'Echarts 入门'
  },
  legend: {
    // 跟图表对应  名字要跟图表的name值相对应
    data: ['饼图', '折线图', '柱状图']
  },
  toolbox: {
    feature: { 
      // 保存图片
      saveAsImage: {}
      // 放大
      dataZoom: {
        // 控制某一个y轴 给一个不存在的y轴
        yAxisIndex: false, // 解决放大后柱状图变成空白的bug 
      },
      // 还原状态
      restore: {}
    }
  },
  // 预览图表
  dataZoom: {
    show: true,
    start: 30,
    end: 100
  },
  // 控制图表位置
  grid: {
    left: 20,
    width: '50%', // 控制图表的大小
    height: '40%'
  },
  // x轴
  xAxis: {
    data: ['衬衫','裤子','袜子']
  },
  // 设置数据源
  dataset: {
    source: [
      // 公共数据复用
      ['火车票', 100, 30],
      ['飞机票', 400, 40],
      ['酒店', 200, 50],
      ['大巴票', 20, 50]
    ]
  },
  // 系列: 饼图、柱状图、折线图···
  series: [
    {
      type: 'bar', // 柱状图
      data: [20, 30, 40]
    },
    {
      type: 'scatter', // 散点图
      encode: { // 配合source中的数据
        x: 0,
        y: 1
      }
    }
  ]
  // y轴
  yAxis: {},
  
}

// 4. 设置配置项
chart.setOption(option);

2、echarts.init() 方法

/**

  • init 方法: 初始化一个echarts图表
  • 参数1:要渲染的DOM
  • 参数2:主题配色
  • 参数3:以canvas渲染还是svg渲染(Echarts 4.0才有)
  • 数据量大:用canvas
  • 数据量少:用svg(内存占用低,渲染性能略微高,缩放不失帧,对移动端更友好)
    */

3、series 系列(option配置项)

  • series:一个数组,数组里一个对象对应一个图表

柱状图

series: [
  {
    type: 'bar', // 柱状图
    data: [20, 30, 40]
  }
]

折线图

series: {
  type: 'line',
  seriesLayoutBy: 'row', // 按照source数组中的行来读取数据
  
}

饼图

series: [
  {
    type: 'pie', // 柱状图
    radius: 50, // 半径
    center: [400, '10%'], // 距离左上角坐标轴x, y的位置坐标 调整图表位置
    encode: { // 配合dataset.source里数据
      itemName: 3, // 饼图的每一块的名称取dataset.source里数据的索引
      value: 4 // 饼图的每一块所占的空间区域取dataset.source里数据的索引
    },
    data: [
      { name: '火车票', value: 100 },
      { name: '酒店', value: 200 },
      { name: '飞机票', value: 400 },
      { name: '大巴票', value: 20 },
    ]
  }
]

4、dataset 数据源

4.0 后提供

5、标题

title: {
  text: 'Echarts 入门', // 主标题
  subtext: '副标题'
},

6、legend 图例

legend: {
  // 跟图表对应  名字要跟图表的name值相对应
  data: ['饼图', '折线图', '柱状图'],
  left: 300, // 图例的位置
  right: '20%', // 图例的位置
},

data里还可以是对象的配置:

data: [
  {
    name: '饼图', 
    icon: 'circle'
  },
  {
    name: '折线图', 
    icon: 'circle',
    textStyle: {
      color: 'blue'
    }
 }, 
]

7、toolbox 工具

toolbox: {
  feature: { 
    // 保存图片
    saveAsImage: {}
    // 放大
    dataZoom: {
      // 控制某一个y轴 给一个不存在的y轴
      yAxisIndex: false, // 解决放大后柱状图变成空白的bug 
    },
    // 还原状态
    restore: {}
  }
},

8、dataZoom

9、grid 控制图表位置

// 控制图表位置
  grid: {
    left: 20,
    width: '50%', // 控制图表的大小
    height: '40%'
  },

你可能感兴趣的:(Echarts,echarts,javascript,前端)