一、Echarts配置项详解

(一)标题组件title

1.text：主标题文本

2.subtext：副标题文本

3.left：标题的位置，可选：'left', 'right', 'center'

(二)提示框组件tooltip

1.trigger：触发类型：坐标轴触发，可选：'axis' 坐标轴触发，'item' 数据项触发

2.axisPointer{ // 坐标轴指示器配置项 
    type: 'shadow' // 指示器类型：'shadow' 阴影，可选：'line' 直线，'shadow' 阴影

 }

(三)图例组件legend

1.data:[  ] 图例的数据数组

2.top:'bottom' // 图例的位置，可选：'top', 'bottom', 'left', 'right'

(四)工具箱toolbox

1.show:true 是否显示工具箱

2.feature: {  //各工具配置项

          mark: {show: true},

          dataView: {show: true, readOnly: false}, // 数据视图工具，是否只读

          magicType: {show: true, type: ['line', 'bar', 'stack']}, // 图表类型切换

          restore: {show: true}, // 配置项还原工具

          saveAsImage: {show: true} // 保存为图片工具

       }

(五)直角坐标系内绘图网格grid 

1.left:’3%’   // 网格左侧的距离

2.right：’3%’   //网格右侧的距离

3.bottom:’3%’    //网格底部的距离

4.containLabel: true   // 网格区域是否包含坐标轴的刻度标签

(六)X轴配置xAxis 

1.type:'category',   // 类型：'category' 类目轴，'value' 数值轴

2.data:[  ],  //类目数据

3.axisTick:{  //刻度线配置

            alignWithLabel: true // 刻度线和标签是否对齐

        }

(七)Y轴配置yAxis

1.type:value,     // 类型：'category' 类目轴，'value' 数值轴

(八)系列列表serise 

1.name: 系列名称,

2.type: ’bar’,   // 类型：'bar' 柱状图，'line' 线图，'pie' 饼图等

3.barWidth: ‘20%’  //柱条宽度

4.data:  [10, 52, 200, 334, 390]   // 系列中的数据值

二、配置示例代码

(一)折线图示例

1.示例代码

import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  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',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
 
option && myChart.setOption(option);

2.实现效果

(二)柱状图示例

1.示例代码

import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};
 
option && myChart.setOption(option);

2.实现效果 

(三)饼图示例

1.示例代码

import * as echarts from 'echarts';
 
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};
 
option && myChart.setOption(option);

2.实现效果

好了，本文就到这里吧，点个关注再走嘛~