Echarts炫酷配置

￡神魔★判官ぃ 2022-12-22 08:42 298阅读 0赞

## Echarts炫酷配置 ##

#### 柱状图 ####

grid: { 
              top: "15%",
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,  //刻度显示
            },
     color: "#00edff",  //直接设置柱状图的柱状颜色，多个的话可以写成数组
            dataZoom: [
              { 
                type: "slider", //提供一个滑块可以左右滑动来进行数据筛选，说白了就是把想看到的数据放大，还有一个属性值`inside`这个是可以直接通过鼠标滚轮进行筛选，内置，下面不会出现滑块
                yAxisIndex: 0,    //第一条y轴
                show: true,	//柱状数据显示
                height: "85%",
                width:'6%',
                bottom: '5%',
                left: "5%",
                textStyle: { 	//柱状数据文字
                  color: "white",
                  fontSize:20
                },
                // borderColor: "transparent", //滚动条边框
                backgroundColor: "#11c19c", //滚动长条颜色
                // 拖拽手柄样式 svg 路径
                handleColor: "red", //滚动颜色
                handleSize: 30,   //手柄大小也就是滚动的小圆点
                start: 100,   //终止百分比
                end: this.index, //这个是我封装的终止跟返回值
              },
            ],

![上面配置完成的效果][20201118172556618.png_pic_center]

#### 饼图 ####

tooltip: { 
              trigger: "item",
              formatter: " {b}:<br/>{c} ({d}%)",
            },
            title: [
              { 
                subtext: "年度综合能耗占比",   //副标题
                left: "76%",
                top: "8%",
                textAlign: "center",  //副标题位置
                subtextStyle: {    //副标题文字效果
                  color: "white",
                  fontSize:18
                },
              },   
              legend: {     //过滤标题也就是分类的小模块
              left: "center",
              top: "14%",
              data: this.data;  //vue获取的数据
              itemWidth: 30,   //小模块大小
              itemHeight: 15,    
            },
            toolbox: {    //内置对象 有导出图片，数据视图，动态类型切换，数据区域缩放，重置的美好
              show: true,//是否显示工具栏组件
              feature: { //除了各个内置的工具按钮外，还可以自定义工具按钮。
                mark: {  show: true },
                magicType: { 
                  show: true,
                  type: ["pie", "funnel"], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
                },
              },
            },
            series: [
              { 
                type: "pie",
                radius: "50%",
                center: ["25%", "60%"],
                roseType: "radius",//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
    //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
    //'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                label: { 
                  show: true,  //显示数据
                },
                data: this.data,
                startAngle: 150, //坐标系起始角度，也就是第一个指示器轴的角度。可以旋转
                itemStyle: { 
                  normal: { 
                    label: { 
                      show: true,
                      position: "outer",  //内容显示在外面
                      fontSize: 12,
                      fontWeight: "bold",
                      align: "left",
                      formatter: "{b}:({d}%)",
                    },
                    labelLine: { 
                      //指示线状态
                      show: true,
                      smooth: 0.4,
                      length: 15,
                      length2: 15,
                      smooth: true,
                    },
                  },
                },
              },
            ],
               // roseType: "radius", //南丁格尔图 半径取决于数据大小这个跟上面的radius不能同用
            // selectedMode: "single", //设置选中的效果，能够将选中的区域偏离原点一小段距离,`multiple`可以实现多选偏离因为前面那个属性值离开的时候他会自动还原
            // selectedOffset: 20, //设置偏离的距离
            }

![在这里插入图片描述][20201118173917125.png_pic_center]

#### 折线图 ####

> 这里主要讲基准线

series: [
      //省略部分代码
              { 
                // areaStyle: {},
                // smooth: true,
                name: "计划",
                type: "line",
                markLine: { 
                  // symbol: "none", //基线两头是否有起始标记
                  label: { 
                    position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
                    formatter: this.data+"(kw/h)",
                    // color: "red",
                    fontSize: 18,
                  },
                  lineStyle: { 
                    normal: { 
                      color: "#fcff00",
                      type: "dashed",
                    },
                    // animationThreshold:2
                  },
                  data: [{  yAxis: this.data, name: "min" }],  //基准线数值
                },

[20201118172556618.png_pic_center]: /images/20221120/19de2de775ee4d9eb67f897b9936b278.png
[20201118173917125.png_pic_center]: /images/20221120/e1ed660082674d329d12cbbe4158c67b.png