随手记——echarts图表

最新推荐文章于 2023-02-03 10:01:56 发布

前端攻城狮中的小菜鸡

最新推荐文章于 2023-02-03 10:01:56 发布

阅读量314

点赞数 1

文章标签： echarts

本文链接：https://blog.csdn.net/m0_55645703/article/details/121159060

版权

总结下简单的echarts配置项

import * as echarts from 'echarts';

let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
myChart.setOption({

//配置项

})

1. title--图表标题

title: {
    text: '标题文字',   //标题文字
    left: 'center',     //标题文字展示的位置 默认left  可修改为center、right
    top:'bottom',       //标题文字展示的位置 默认top   可修改为middile、bottom
    textStyle: {        //标题文字的样式
      fontSize: 20
    },
  },

2. legend--图例组件的标记

legend: {
    data:['A','B'],   //图例项的名称，应等于某系列的name值
    left:'center',    //图例标记展示的位置 默认center  可修改为left、right
    top:'top',         //图例标记展示的位置 默认top   可修改为middile、bottom
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      name:'A'    //此系列name
    },
    {
      data: [110, 200, 124, 208, 165, 247, 200],
      type: 'line',
      name:'B'    //此系列name
    }
  ]

3. xAxis--X轴/横轴配置

//指定X轴刻度
xAxis: {
    type: 'category'    //坐标轴类型  常用category类目轴，value数值轴，time时间轴
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      name:'A'
    },
]
//不指定X轴刻度
xAxis: {
    // type: 'category'
    type:'time'
 },
 series: [
    {
      // data: [['A',150], ['B',230],['C',224],['D',218],['E',135],['F',147]],
      data: [['2021-11-1',150], ['2021-11-2',230],['2021-11-3',224],['2021-11-4',218],['2021-11-5',135],['2021-11-6',147]],    //[[X轴坐标，Y轴坐标],[X,Y]]
      type: 'line',
      name:'A'
    },
]

4. yAxis--Y轴/竖轴配置

 yAxis: {
    type: 'value',    //坐标轴类型  同X轴
    interval:20,      //强制设置坐标轴分割间隔
    max:300,          //坐标轴最高刻度
    min:100            //最低刻度，从何开始
  },    
//多纵轴
yAxis: [
    {
      type: 'value'
    },
    {
      type: 'value',
      interval: 20,
      max: 300,
      min: 100
    }
  ],

5. tooltip--提示框组件

 tooltip: {
    trigger: 'axis'    //触发类型
  },

//触发类型
item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

6. series--组件系列

series:[
    {
        type:line,    //系列类型  line折线图，bar柱状图，pie饼状图，scatter散点图
        name:'A',        //系列名称
        smooth: true,    //折线图中使用   线条平滑
        stack:true,      //是否堆叠起来
        itemStyle:{
            color:'red'    //系列图形颜色
        },
        areaStyle: {},     //折线图用    显示折线图面积
        data:[             //系列数据
            ['2021-11-1', 150],
            ['2021-11-2', 230],
            ['2021-11-3', 224],
            ['2021-11-4', 218],
            ['2021-11-5', 135],
            ['2021-11-6', 147]
        ]
    }
]