echarts 柱状图-折线图-饼图的基础使用

画了五官的猕猴

于 2023-08-15 18:45:27 发布

阅读量446

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/132298067

版权

上图示例图表展示相关配置：

      var myChart = echarts.init(this.$refs.firstMain);
      myChart.setOption({
        legend: { // 图例设置
          top: "15%",
          type: "scroll",
          orient: "vertical",//图例列表的布局朝向。
          left: "right",
          pageIconColor: 'red', // 激活的分页按钮颜色
          pageIconInactiveColor: 'yellow', // 没激活的分页按钮颜色
          selectedMode: false,
          pageIconSize: 12,  //当然就是按钮的大小
        },
        title: {
          text: "县区采集分布",
          left: "left",
        },
        tooltip: { // 提示框组件设置
          padding: [15, 15],
          enterable: true,// 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//额外附加到浮层的 css 样式。
          show: true,
          trigger: "item",
          confine: true, // 是否将 tooltip 框限制在图表的区域内。
          // dom: "overflow:hidden",
          formatter: function (params) {
            let htmlStr = `<span style="color:${params.color}">${params.data.value}</span>`;
            //圆点后面显示的名称'
            let res = params.marker +params.data.name +"&nbsp;&nbsp;" + htmlStr +"<br/>";
            for (var i = 0; i < params.data.list.length; i++) {
              let obj = params.data.list[i];
              res += `<div style="color:#999;text-indent:1em">${obj.label}&nbsp; &nbsp;<span style="color:#333333">${obj.total}</span></div>`;
            }
            return `${res}`; //最后返回拼接好的值
          },
        },
        grid: {
          left: "3%",
          top: "20%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        dataset: {
          // 提供一份数据。
          dimensions: ["name", "value"],
          source: res.data.data,
        },
        graphic: { // 数据为空时展示为空提示
          type: "text", // 类型：文本
          left: "center",
          top: "middle",
          silent: true, // 不响应事件
          invisible: res.data.data.length > 0, // 有数据就隐藏
          style: {
            x: 0,
            y: 0,
            fill: "#9d9d9d",
            fontWeight: "bold",
            text: "暂无数据",
            fontFamily: "Microsoft YaHei",
            fontSize: "25px",
          },
        },
        series: [
          {
            name: this.emptyText,
            type: "pie",
            radius: ["35%", "45%"],