Echarts教程_3 具体内容

悠悠 2023-01-05 01:17 195阅读 0赞

https://gitee.com/fakerlove/echarts

### 文章目录 ###

*  3. echarts 具体讲解
 *   *  3.1 配置项讲解
     *  3.2 柱状图
     *  3.3 折线图
     *  3.4 饼状图
     *  3.5 地图

# 3. echarts 具体讲解 #

## 3.1 配置项讲解 ##

全部的配置项网址

https://echarts.apache.org/zh/option.html#title

<table> 
 <thead> 
  <tr> 
   <th>配置名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>设置图表的标题</td> 
  </tr> 
  <tr> 
   <td>tooltip</td> 
   <td>图表提示框组件</td> 
  </tr> 
  <tr> 
   <td>trigger</td> 
   <td>触发方式</td> 
  </tr> 
  <tr> 
   <td>legend</td> 
   <td>图例组件</td> 
  </tr> 
  <tr> 
   <td>grid</td> 
   <td>网格配置，图表不一样和容器一样大。可以控制线性图的大小</td> 
  </tr> 
  <tr> 
   <td>toolbox</td> 
   <td>工具箱</td> 
  </tr> 
  <tr> 
   <td>xAxis</td> 
   <td>X 轴</td> 
  </tr> 
  <tr> 
   <td>yAxis</td> 
   <td>Y 轴</td> 
  </tr> 
  <tr> 
   <td>series</td> 
   <td>系列图表配置，显示那种配置信息，其中type 信息决定了图的类型，pie 为饼图，line 折线图，bar 为柱状图</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>设置线条颜色，是数组</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 3.2 柱状图 ##

引入相关js

// ()(); 这个是立即执行函数
    (function() { 
        var myCharts = echarts.init(document.querySelector(".bar .chart"));
    
        // 制定数据
        var option = { 
            // 设置图表的信息
            color: ["#2f89cf"],
            tooltip: { 
                // 这个是提示框信息
                trigger: "axis",
                // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                axisPointer: { 
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            // 修改图表的大小
            grid: { 
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true,
            },
            // 坐标轴信息
            xAxis: [{ 
    
                type: "category",
                data: [
                    "旅游行业",
                    "教育培训",
                    "游戏行业",
                    "医疗行业",
                    "电商行业",
                    "社交行业",
                    "金融行业",
                ],
                axisTick: { 
                    alignWithLabel: true,
                },
                // 修改刻度标签相关样式
                axisLabel: { 
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: "12",
                    interval: 0, //控制是否全部显示
                },
                // 不显示x轴的样式
                axisLine: { 
                    show: false,
                },
            }, ],
            yAxis: [{ 
                type: "value",
                // 修改刻度标签相关样式
                axisLabel: { 
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: "12",
                },
                // y轴坐标系
                axisLine: { 
                    lineStyle: { 
                        color: "rgba(255, 255, 255, .1)",
                        width: 2,
                    },
                },
                // y轴分割线的颜色
                splitLine: { 
                    lineStyle: { 
                        color: "rgba(255, 255, 255, .1)",
                    },
                },
            }, ],
            series: [{ 
                name: "直接访问",
                type: "bar",
                // 修改柱子的宽度
                barWidth: "35%",
                data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: { 
                    // 修改柱子的圆角
                    barBorderRadius: 5,
                },
            }, ],
        };
        // 把配置项给实列对象
        myCharts.setOption(option);
    
    })();

## 3.3 折线图 ##

## 3.4 饼状图 ##

## 3.5 地图 ##

在社区找自己想要的地图

https://www.makeapie.com/explore.html

**首先要引入china.js文件**

然后使用地图