当前位置：首页 > article >正文

echarts图表的使用（常用属性）

article 2024/11/8 0:48:46

通用属性

title

图表的标题，可设置标题文本、位置、样式等。例如：

{
    "title": {
        "text": "示例图表",
        "left": "center",
        "textStyle": {
            "fontSize": 18,
            "fontWeight": "bold"
        }
    }
}

tooltip

鼠标悬停在图表元素上时显示的提示框内容及样式设置。可以配置提示框显示的格式、触发方式等，比如：

{
    "tooltip": {
        "trigger": "item",
        "formatter": "{a} <br/>{b}: {c}"
    }
}

legend

图例，用于标识不同系列的数据。可设置图例的位置、排列方式、样式等，如下：

{
    "legend": {
        "orient": "vertical",
        "left": "left",
        "data": ["系列1", "系列2"]
    }
}

坐标轴相关属性

xAxis 和 yAxis

分别用于设置 x 轴和 y 轴的属性。常见的设置包括坐标轴类型（如数值轴、类目轴等）、坐标轴名称、刻度设置等。
例如，对于 x 轴设置为类目轴：

{
    "xAxis": {
        "type": "category",
        "data": ["苹果", "香蕉", "橙子"],
        "name": "水果种类",
        "axisTick": {
            "show": false
        }
    }

    "yAxis": {
        "type": "value",
        "name": "销量",
        "axisLabel": {
            "formatter": "{value} kg"
        }
    }
}
}

系列（series）属性

type

指定图表的类型，如柱状图（'bar'）、折线图（'line'）、饼图（'pie'）等。不同类型的图表有其特定的配置选项。
例如，绘制柱状图：

{
    "series": [
        {
            "type": "bar",
            "name": "水果销量",
            "data": [10, 20, 15]
        }
    ]
}

data

{
    "series": [
        {
            "type": "pie",
            "name": "水果占比",
            "data": [
                {
                    "name": "苹果",
                    "value": 30
                },
                {
                    "name": "香蕉",
                    "value": 50
                },
                {
                    "name": "橙子",
                    "value": 20
                }
            ]
        }
    ]
}

图表样式属性

color

用于设置图表的颜色主题或单个系列的颜色。可以是一个颜色数组，按照系列顺序依次应用颜色，也可以针对特定系列设置颜色，如下：

{
    "color": ["#3398DB", "#66CCFF", "#99FF99"],
    "series": [
        {
            "type": "line",
            "name": "系列1",
            "data": [1, 2, 3],
            "lineStyle": {
                "color": "#FF0000"
            }
        }
    ]
}

backgroundColor

设置图表的背景颜色

其他练习实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<style>
  #main{
    margin: 20px;
    width: 30%;
    height: 40vh;
    min-height: 100px;
    min-width: 150px;
  }
  #two{
    margin: 10px; 
    width: 30%;
    height: 40vh;
    min-height: 100px;
    min-width: 150px;
  }
  body{
    background-color: rgb(10, 95, 193);
  }
</style>
<body>
    <div id="main"></div>
    <script>
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        //对标题进行设置
          title: {
          //标题
          text: '农作物病害发生防止面积',
          //标题样式
          textStyle:{
            //颜色
            color:'#fff'
            //字体大小
            //font-size
          }
          //副标题
          //subtext: 'Fake Data'
        },
        //提示框组件
        tooltip: {
        trigger: 'axis',
        axisPointer:{
          type:"shadow"
        },
        backgroundColor:'rgb(0,0,0,0.8)',
        borderColor:'rgb(0,120,212,0.5)',
        textStyle:{
          color:'#fff'
        }
        },
        //图例组件
        legend: {
          data: ['发生面积', '防止面积'],
          //位置
          right:'3%',
          //布局朝向
          orient:'vertical',//纵向
          //样式
          textStyle:{
            //颜色
            color:'#fff'
            //字体大小
            //font-size
          }
        },
        //工具
        /*toolbox: {
        show: true,
        feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },*/
      calculable: true,
      xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
        //坐标轴轴线
        axisLine:{
          //坐标轴样式
          lineStyle:{
            color:'#fff',
          }
        }
      }
    ],
      yAxis: [
      {
        //坐标轴名称
        name:'面积（亿亩）',
        type: 'value',
        axisLine:{
          //显示纵轴
          show:'show',
          //坐标轴样式
          lineStyle:{
            color:'#fff',
          }
        },
        //去掉背景分割横线
        splitLine:{
          show:false
        }
      }
    ],
    series: [
    {
      name: '发生面积',
      type: 'bar',//柱状图
      data: [24,51,59,62,51,45,28],
      /*markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }*/
    },
    {
      name: '防止面积',
      type: 'bar',
      data:[21,50,55,59,48,41,25],
      /*markPoint: {
        data: [
          { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
          { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }*/
    }
  ],
  //柱状图颜色
  //color:['','']
  //位置
  grid:{
    left:'5%',
    right:'5%',
    bottom:'2%',
    //是否包含坐标轴
    containLabel:true
  }
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      //图标调整尺寸
      window.onresize = function(){
        myChar.resize()
      }
    </script>
<!-- 第二个图表 -->
<div id="two"></div>
<script>
  var myChart2 = echarts.init(document.getElementById('two'));
  var option2 = {
    title: {
          //标题
          text: '病虫害致粮食损失统计',
          //标题样式
          textStyle:{
            //颜色
            color:'#fff'
            //字体大小
            //font-size
          }
          //副标题
          //subtext: 'Fake Data'
        },
    xAxis: {
    type: 'category',
    boundaryGap: true,
    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
    axisLine:{
          //显示纵轴
          show:'show',
          //坐标轴样式
          lineStyle:{
            color:'#fff',
          }
        },
  },
  yAxis: {
    name:'损失(万吨)',
    type: 'value',
    axisLine:{
          //显示纵轴
          show:'show',
          //坐标轴样式
          lineStyle:{
            color:'#fff',
          }
        },
        //去掉背景分割横线
        splitLine:{
          show:false
        }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      color:'#5B89FE',
      areaStyle: {
          color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向，从左上角到右下角
                [
                    { offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 起始颜色（红色，透明度为0.5）
                    { offset: 1, color: 'rgba(128, 128, 128, 0.2)' }  // 结束颜色（蓝色，透明度为0.5）
                ]
            )
      }
    }
  ]
  };
  myChart2.setOption(option2);
  window.addEventListener('resize', function() {
    myChart2.resize();
  });
</script>
</body>
</html>

查看全文

http://www.kler.cn/a/383695.html