Echarts炫酷配置

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, //这个是我封装的终止跟返回值
          },
        ],

饼图

  tooltip: {
          trigger: "item",
          formatter: " {b}:
{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, //设置偏离的距离
        }

折线图

这里主要讲基准线

  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" }],  //基准线数值
            },