echarts图表从使用到各项配置再到入坑

飞蛾扑火L

已于 2022-07-29 11:45:30 修改

阅读量277

点赞数 1

文章标签： echarts 前端 javascript vue.js html5

于 2022-07-27 10:33:02 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70015558/article/details/125821106

版权

本文介绍了如何使用echarts，包括npm安装、基本使用和常用配置。通过示例展示了如何创建折线图，并强调了在Vue中需要注意的绑定div宽高问题。此外，提到了tooltip对象的formatter模板变量和xy轴的不同类型。最后，讨论了地图显示移位的问题，指出仅改变数据可能导致地图位置移位，需要重新生成地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来说一下echart的使用和配置，话不多说，直接上菜

npm安装

npm install echarts --save

使用

引入echarts文件和配置文件

import * as echarts from 'echarts';

创建一个方法，直接调佣（折线图），想了解各种可以去官网

getEcharts() {
            let chartDom = this.$refs.echart1;    //获取div节点        
            let myChart = echarts.init(chartDom);    
            let option;

            option = {
                  xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                    type: 'value'
              },
              series: [
                    {
                      data: [150, 230, 224, 218, 135, 147, 260],
                      type: 'line'
                    }
                 ]
            };
            option && myChart.setOption(option);
        },

注意：绑定div要宽高，在mounted中调佣（vue）

.echart1 {
    width: 100%;
    height: 62vw;
}

一些常用的配置：

主要讲一些常用的配置，请各位观众看注释了解（折线图）。

option = {
          tooltip: {    
              trigger: "item",    //'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                                  //'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                                  //'none'什么都不触发。
              formatter: " {c}",  //数据
          },
          toolbox: {    //工具箱
            feature: {    //工具配置
              dataView: { show: true, readOnly: false },    //数据视图
              magicType: { show: true, type: ['bar'] },   //切换图表显示
              restore: { show: true },    //还原
              saveAsImage: { show: true }   //图表下载
            }
          },
          textStyle: {    //文字样式,和css设置样式差不多，大小颜色类型加粗等等
            fontSize:16
          },
          grid: {         //网格,下面组件离容器上下左右的距离
              top: "10%",
              left: "3%",
              right: "4%",
              bottom: "32%",
              containLabel: true,   //是否包含坐标轴的刻度标签
          },
          legend: {   //图例
              data: ['光','暗'],  //图例的数据数组
              top: 'bottom'   //上侧的距离
          },
          axisPointer:{    //坐标轴指示器
            show:true,
            type:'line'    //'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器
          },
          xAxis: {          //x轴
              type: "value",
              name: "净丝重：g",
              nameLocation: "middle",    //名称显示位置(start,middle,end)
              nameGap: 24,    //坐标轴名称与轴线之间的距离
              // data: [10, 20, 30, 40, 50, 60, 70]
              // interval:50, // 步长
              min: 100, // 起始
              max: 300, // 终止
          },
          yAxis: {        //y轴
              type: "value",
              name: "压降：Pa",
              // nameTextStyle: { // x轴name的样式调整
              //   color: '#000', 
              //   fontSize: 22,
              // },
              //nameRotate: 90, // y轴name旋转90度 使其垂直
              // min: 2500,
              // // max: 6000,
          },
          series: [   //数据
            {
              name:'光',    //数据对象名，跟legend对应
              data: [[124, 218],[235, 317],[224, 288],],
               type: 'line'   //图表类型，line是折线图
            },
            {
              name:'暗',
              data: [[150, 230],[224, 188],[235, 302]],
               type: 'line'
            },
          ]

      };

echarts表如下：