echarts的简单例子

最近用到了echarts, 实现效果大概是这样的

双y轴的样式那么怎么设置双y轴呢？

第一步： 找到官方文档Apache ECharts

安装：npm install echarts --save

引入：import * as echarts from 'echarts';

实例化： // 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main')); // 绘制图表 //配置echart里面的信息 let option={ title: { text: 'ECharts 入门示例' },

tooltip: {},

xAxis: {},

yAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },

series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] } //把配置弄进实例里面 option&&myChart.setOption(option);

上面是官方给予的基本配置例子

而实现双y轴 option.legend要放入一个数组，对应的option.series放入对应数据数组，option.yAxis为数据数组对应的样式所以也有个数组，这种情况下一个表多条数据线的功能就实现了

下一步进行双y轴的设置，因为我们这个需求里面有一项的数据比较大，所以我们把这个项与其他项分为两种类型，分别对应左右两个y轴

只需要在option.yAxis[i]对应项目设置position:right其余为position：left，并且在option.series[i]对应项目设置 yAxisIndex：1其余为 yAxisIndex：0 即可。

样式调整： 在0，404这些数据后面添加一个‘次’，这时候需要自定义鼠标上移时的样式 即：

在tooltip中设置formatter

tooltip: {
trigger: "axis", //触发类型;轴触发
textStyle: {
  color: "#fff",
  fontWeight: "normal",
},
backgroundColor: "#00050A",
borderColor: "#00050A",
axisPointer: {
  lineStyle: {
    color: "#1D425D",
    type: "solid",
  },
},
//自定义返回
formatter: function (params) {
  var relVal = params[0].name;
  for (var i = 0, l = params.length; i < l; i++) {
  //marker这个为名称前面的有颜色的小圆点样式，seriesName这个为名称，value是每项的数值
    relVal +="<br/>" + params[i].marker+ params[i].seriesName + " : " +      params[i].value + "次";
  }
  return relVal;
},
},

全例子为

`

 var option = {
   color: ["#2900F5", "#38A9E9", "#EF7F39", "#108033"],
   legend: {
   textStyle: {
     color: "#6286B4",
     fontSize: 15,
     },
   itemWidth: 14,
   itemHeight: 8,
   itemStyle: {
      opacity: 0,
    },
    },
   tooltip: {
        trigger: "axis",
        textStyle: {
             color: "#fff",
             fontWeight: "normal",
     },
   backgroundColor: "#00050A",
   borderColor: "#00050A",
   axisPointer: {
        lineStyle: {
          color: "#1D425D",
          type: "solid",
     },
   },
formatter: function (params) {
  var relVal = params[0].name;
  for (var i = 0, l = params.length; i < l; i++) {
    relVal +=
      "<br/>" + params[i].marker+ params[i].seriesName + " : " + params[i].value + "次";
  }
  return relVal;
},
},
  grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
 },
 xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
  textStyle: {
    color: "#f6fafd",
  },
},
axisTick: {
  show: false,
},
axisLine: {
  lineStyle: {
    color: "#14283F",
  },
},
// data: ["0时", "4时", "8时", "12时", "16时", "20时", "23时"],
},
yAxis: [],
series: [],
};

//初始化从接口中拿到数据 res.data
 this.initChart(res.data);
 
  initChart(data) {
  let types = [
    { name: "车道拥堵", key: "车流拥堵分析", data: [] },
    { name: "逆行", key: "车辆逆行识别", data: [] },
    { name: "大卡车", key: "大卡车识别", data: [] },
    { name: "车辆停留", key: "车辆长期停留识别", data: [] },
  ];
  let labels = [];
  data.map((item) => {
    types.map((type) => {
      if (item.name == type.key) {
        labels.push(type.name);
      }
    });
  });

  option.legend.data = labels;
  data.map((item, i) => {
    let seriesData = [];
    let labelsData = [];
    item.data.map((ele) => {
      // if (option.xAxis.data.includes(ele.label)) {
      seriesData.push(ele.value);
      labelsData.push(ele.label);
      // }
    });

    option.series[i] = {
      name: labels[i],
      type: "line",
      yAxisIndex: i == 2 ? 1 : 0,
      // smooth: true,
      lineStyle: slineStyle,
      data: seriesData,
      showSymbol: false,
      symbolSize: 8, //小圆点的大小
      itemStyle: {
        emphasis: {
          borderWidth: 3,
        },
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: colorStops[i],
          globalCoord: false,
        },
      },
    };
    option.yAxis[i] = {
      name: i == 2 ? "卡车/辆" : i == 0 ? "报警/次" : "",
      type: "value",
      position: i == 2 ? "right" : "",
      alignTicks: true,
      axisLabel: {
        textStyle: {
          color: "#f6fafd",
        },
      },
      minInterval: 1,
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "#14283F",
        },
      },
      nameTextStyle: {
        color: "#fff",
        padding: [0, 0, 0, -10],
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#14283F",
        },
      },
    };
  });

  let chartDom = document.getElementById("main");
  let chart = echarts.init(chartDom);
  option && chart.setOption(option);

  // 监听窗口尺寸变化，chart随之自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
},