echarts样式总结

echarts配置项

series: [{
      barWidth:26,// 柱形宽度（折线图无）
      name: '',// legend对应的名称
      type: 'bar',// 图形类型
      stack: 'TUE',// 若多个值一样，则堆叠到一起
      data: [1,1,1,11],// 数值
      smooth: true, // 线条平滑展示，折线图起作用
      areaStyle: {},// 面积填充,折线图有效
      emphasis: {// 高亮
          label: {
              show: true,
              textStyle: {
                  color: '#333333',
                  fontWeight: 'bold'
              }
          }
      }
  }]

makeline平均值样式配置

markLine: {
  label: { // 去除文字
    normal: {
      position: 'inner',
      show: false
    }
  },
  symbol: 'none', //去掉箭头
  data: [{
    type: 'average',
  }],
  lineStyle: {
    // 个性化折线样式
    width: 1,
    color: "#FD9D03" //折线的颜色
  }
}

滚动条配置

dataZoom:[{
	type: 'slider',//图表下方的伸缩条
	show : true, //是否显示
　　realtime : true, //拖动时，是否实时更新系列的视图
　　start : 0, //伸缩条开始位置（1-100），可以随时更改
　　end : 100, //伸缩条结束位置（1-100），可以随时更改
}]

dataZoom=[                                      //区域缩放
    {
        id: 'dataZoomX',
        show:true,                              //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        backgroundColor:"rgba(47,69,84,0)",  //组件的背景颜色
        type: 'slider',                         //slider表示有滑动块的，inside表示内置的
        dataBackground:{                        //数据阴影的样式。
            lineStyle:mylineStyle,              //阴影的线条样式
            areaStyle:myareaStyle,              //阴影的填充样式
        },
        fillerColor:"rgba(167,183,204,0.4)",  //选中范围的填充颜色。
        borderColor:"#ddd",                     //边框颜色。
        filterMode: 'filter',                   //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
                                                  //'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
                                                  //'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
                                                  //'none': 不过滤数据，只改变数轴范围。
        xAxisIndex:0,                            //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                        //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                       //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                    //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                                //数据窗口范围的起始百分比,表示30%
        end: 70,                                  //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                  //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                   //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
        left:"center",                           //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                             //组件离容器右侧的距离,'20%'
        bottom:"auto",                            //组件离容器下侧的距离,'20%'
 
    },
    {
        id: 'dataZoomY',
        type: 'inside',
        filterMode: 'empty',
        disabled:false,                         //是否停止组件的功能。
        xAxisIndex:0,                           //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                       //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                      //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                   //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                               //数据窗口范围的起始百分比,表示30%
        end: 70,                                  //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                   //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                    //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
    }
],

效果参考

• H5

代码实现

 <!--为echarts准备一个具备大小的容器dom-->
 <div :id="idCanvas" style="width:460px;height:350px;margin:auto;"></div>

//调用
this.drawLine(this.idCanvas);
//方法
drawLine(id) {
      let that = this;
      let type = this.type;
      let dataX = this.timeData;
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "",
          subtext: this.textTitle
        },
        textStyle: {
          color: "#838383"
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            return params[0].value;
          }
        },
        grid: {
          left: "18",
          right: "22",
          bottom: "3%",
          containLabel: true
        },

        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.timeData,
          axisLine: {
            lineStyle: {
              color: "#E1E1E1" // 颜色
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              //改变刻度字体样式
              color: "#838383"
            },
            //年月日 $t("")  —— 国际化
            formatter: function(params) {
              if (type == 3) {
                if (that.GLOBAL.locale == "zh") {
                  return params + that.$t("font_9");
                } else {
                  return that.$t("month" + ~~params);
                }
              } else if (type == 1) {
                if (dataX[dataX.length - 1] == params) {
                  return that.$t("font_81");
                }
                if (dataX[dataX.length - 2] == params) {
                  return that.$t("font_82");
                }
                return params;
              } else if (type == 2) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 6;
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            }
          }
        },
        yAxis: {
          type: "value",
          // scale: true,
          // max: 60,
          // min: 0,
          // splitNumber: 6,
          // boundaryGap: [0.2, 0.2],
          axisLine: {
            lineStyle: {
              shadowOffsetY: -20,
              shadowColor: "rgba(225,225,225,1)",
              color: "#E1E1E1" // 颜色
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              //改变刻度字体样式
              color: "#838383"
            }
          },
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F2F2F2"],
              width: 1,
              type: "solid"
            }
          }
        },

        series: [
          {
            type: "line",
            data: this.opinionData,
            itemStyle: {
              normal: {
                color: "#3192D2", //折线点的颜色
                borderWidth: 2,
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 1,
                  type: "solid",
                  color: "#71b5e1" //折线的颜色
                }
              }
            }, //线条样式
            symbolSize: 8, //折线点的大小
            //区域颜色渐变
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(28,179,255,.5)" // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(184,240,255,0.1)" // 0% 处的颜色
                  }
                ]) //背景渐变色
              }
            }
          }
        ]
      });
    }

• 小程序
  

代码实现

 initChart(dataX, dataY) {
      this.setData({
        chartShow: true
      })
      this.ecComponent = this.selectComponent('#mychart-dom-line')
      this.ecComponent.init((canvas, width, height, dpr) => {
        let chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
        });
        canvas.setChart(chart);
        let option = {
          color: ["#37A2DA"],
          grid: {
            left: '0',
            right: '5%',
            top: '10%',
            bottom: '10%',
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: function (params) {
              console.log(params)
              let time = params[0].axisValue.replace(/,/g, ".")
              return '日期：' + time + '\n' + '时长：' + params[0].value + '分钟'
            },
            // extraCssText: "white-space:nowrap;"
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dataX,
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#CBCBCB" // 颜色
              }
            },
            axisLabel: {
              formatter: function () {
                return "";
              }
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#F0F5F8"],
                width: 1,
                type: "dashed"
              }
            }
            // show: false
          },
          // yAxis: {
          //   x: 'center',
          //   type: 'value',
          //   splitLine: {
          //     lineStyle: {
          //       type: 'dashed'
          //     }
          //   },
          //   max: Math.max(...dataY)
          // },


          // dataZoom: [{
          //   type: 'slider', //图表下方的伸缩条
          //   show: true, //是否显示
          //   realtime: true, //拖动时，是否实时更新系列的视图
          //   start: 0, //伸缩条开始位置（1-100），可以随时更改
          //   end: 100, //伸缩条结束位置（1-100），可以随时更改
          // }],
          // series: [{
          //   type: 'line',
          //   smooth: true,
          //   data: dataY,
          // }]
          yAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#CBCBCB" // 颜色
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                //改变刻度字体样式
                color: "#3C3C3C"
              },
            },
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#F0F5F8"],
                width: 1,
                type: "dashed"
              }
            },
          },
          series: [{
            type: "line",
            data: dataY,
            itemStyle: {
              normal: {
                color: "#00A8FF", //折线点的颜色
                borderWidth: 3,
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 1,
                  type: "solid",
                  color: "#00A8FF" //折线的颜色
                }
              }
            }, //线条样式
            symbolSize: 3, //折线点的大小
            markLine: {
              label: { // 去除文字
                normal: {
                  position: 'inner',
                  show: false
                }
              },
              symbol: 'none', //去掉箭头
              data: [{
                type: 'average',
              }],
              lineStyle: {
                // 系列级个性化折线样式
                width: 1,
                color: "#FD9D03" //折线的颜色
              }
            }
          }]
        };
        chart.setOption(option);
        return chart;
      })
    },

微信小程序遇到的问题

• echarts for weixin的图表在手机上很模糊
  官方文档提到了devicePixelRatio这个设备像素比参数加上就不会模糊了
  在初始化的地方写上即可