echart的基本使用方法

最新推荐文章于 2024-05-28 11:11:34 发布

耿耿余淮.

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量5.4k

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_69797846/article/details/125985661

版权

https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js

1.点击下载echart.js文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="lib/echarts.min.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
      xAxis: {
        type: 'category',//category指明x轴为类目轴
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'//value指明y轴为 数值轴, 指明数值轴之后, 无需指定data
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: [70, 92, 87]
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    //5个步骤除了option需要自己配置其他都是固定步骤 配置option参考echart官网！！！
    mCharts.setOption(option)
  </script>
</body>

</html>

2.项目中常用的echart配置

const options = {
            grid: {// 柱状图位置
              top: '15px',
              left: '0',
              right: '0',
              bottom: '10px',
              containLabel: true
            },
            dataZoom: {
              type: 'inside'//隐式滚动条：即不显示滚动条，通过鼠标滚动来缩放缩放柱形图间距，来查看所有的柱形图
              /**显示滚动条，可设置其显示位置，滚动条开始位置、结束位置，宽，高等*/
              // show: true,
              // realtime: true,
              // bottom: '2px',
              // left:'20px',
              // right:'20px',
              // height: 8,
              // start:0,
              // end:100,
              // textStyle:{
              //   color: '#fff'
              // }
            },
            tooltip: {// 鼠标滑上去显示效果
              trigger: 'axis',
              // formatter : function(params){
                    // var res = 'success';  //可以在这个方法中改变鼠标滑上去显示的内容
                    // return res;
              // },
              // axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              //     type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
              // }
            },
            xAxis: {
              name:'PH',//横轴名称
              type: 'category',
              boundaryGap: false,
              color: '#fff',
              data: xdata,
              axisLabel: {//横轴标签样式设置
                show: this.queryType==2?true:false,//控制标签显示
                interval:0,
                textStyle: {
                  color: '#fff', // 更改坐标轴文字颜色
                  fontSize: 10// 更改坐标轴文字大小
                },
                // formatter:function(value,index) {//设置横轴坐标文字每行显示个数，超出换行
                //   var ret = "";//拼接加\n返回的类目项
                //   var maxLength = 10;//每项显示文字个数
                //   var valLength = value.length;//X轴类目项的文字个数
                //   var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                //   if (rowN > 1)//如果类目项的文字大于3,
                //   {
                //     for (var i = 0; i < rowN; i++) {
                //       var temp = "";//每次截取的字符串
                //       var start = i * maxLength;//开始截取的位置
                //       var end = start + maxLength;//结束截取的位置
                //       //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                //       temp = value.substring(start, end) + "\n";
                //       ret += temp; //凭借最终的字符串
                //     }
                //     return ret;
                //   }
                //   else {
                //     return value;
                //   }
                // }
              },
              axisLine: {// x轴样式
                show: true,
                lineStyle: {
                  color: 'rgba(242,242,242,.2)',
                  width: 1,
                  type: 'solid'
                }
              }
              // ,axisTick: {length:220}
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#fff', // 更改坐标轴文字颜色
                  fontSize: 12// 更改坐标轴文字大小
                }
              },
              axisLine: {// x轴样式
                show: true,
                lineStyle: {
                  color: 'rgba(242,242,242,.2)',
                  width: 1,
                  type: 'solid'
                }
              },
              splitLine: {// 格线样式
                lineStyle: {
                  color: 'rgba(242,242,242,.2)'
                }
              }
            },
            series: [{
              data: ydata,
              type: 'line',//折线图
              showAllSymbol:true,//显示所有折线点
              symbol:(val,param)=>{//根据值判断点是否显示以及点的显示类型
                if(this.queryType==1){
                  if(param.dataIndex%4==0){
                    return 'emptyCircle'
                  }else{
                    return 'none'
                  }
                }
                return 'emptyCircle'
              }, //折线点设置为实心点
              symbolSize: 12, // 折线点的大小
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              },
              areaStyle: {},
              itemStyle: {// 柱样式
                normal: {
                  label:{
                    // show:true,
                    color: '#fff'
                  },
                  lineStyle: {
                    color: '#16B7FF', // 折线的颜色
                    width: 2,
                    type: 'solid'// 'dotted'虚线 'solid'实线
                  },
                  borderColor: '#1EB0FC',
                  color: new echarts.graphic.LinearGradient(//折线显示颜色，可设置渐变色
                    0, 0, 0, 1,
                    [
                      // {offset: 0, color: '#44F0FF'},
                      { offset: 0, color: '#42E9F8' },
                      { offset: 0.7, color: '#122C45' },
                      { offset: 1, color: '#021132' }
                    ]
                  ),
                  opacity: 1
                }
              }
            }]
          }