eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决

最新推荐文章于 2024-08-13 14:59:00 发布

一架打字机

最新推荐文章于 2024-08-13 14:59:00 发布

阅读量1.9k

点赞数 3

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/iseyre/article/details/126542150

版权

本文介绍了如何解决Echarts-GL在下载时的版本匹配问题，提供了两种有效解决方案，并展示了如何实现渐变进度条、3D柱状图加折线图以及3D饼图（实心、环形）的配置方法。同时提到了柱状图折线图的x轴y轴显示完整的方法和3D饼图的样式调整。

摘要由CSDN通过智能技术生成

eacharts-gl下载时版本一定要和eacharts版本对应。否则不出效果！！目前已知可以生效有：

第一种1：

npm install echarts@5.1.2 --save
npm install echarts-gl@2.0.5 --save

第二种2：

npm install echarts@5.0.2 --save
npm install echarts-gl@2.0.9 --save

下载后在页面上引入然后像使用eacharts一样的流程就行

import * as echarts from "echarts";

import "echarts-gl";

// 渐变进度条加进度背景实现：

效果：

//实现： dom结构： <div ref='rightcontentchart'></div>

注意定宽高

//方法
getrightcontentchart2() {
      let myChart = echarts.init(this.$refs.rightcontentchart);
      // var salvProName =["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"];
      var salvProName = this.rightswoptions;
      var salvProValue = [239, 181, 154,103];
      var salvProMax = []; //背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0]);
      }
      var attackSourcesColor = [
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#008AFB" },
          { offset: 1, color: "#71B1FF" }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#00BFB0" },
          { offset: 1, color: "#00DCE3" }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#E2EC00" },
          { offset: 1, color: "#DCF87A" }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: "#7B65E9" },
          { offset: 1, color: "#9F9BE1" }
        ])
      ];
      // 渐变颜色
      function attackSourcesDataFmt(sData) {
        var sss = [];
        sData.forEach(function(item, i) {
          let itemStyle = {
            color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
          };
          sss.push({
            value: item,
            itemStyle: itemStyle
          });
        });
        return sss;
      }
     let option = {
        // backgroundColor: "#003366",
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          formatter: function(params) {
            return params[0].name + " : " + params[0].value;
          }
        },
        xAxis: {
          show: false,
          type: "value"
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12"
              }
            },
            data: salvProValue
          }
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#7f6fe3"
                  },
                  {
                    offset: 1,
                    color: "#dcf56b"
                  }
                ])
              }
            },
            // 柱状宽度
            barWidth: 15,
            // salvProValue 数值，保证颜色渐变效果
            data: attackSourcesDataFmt(salvProValue)
          },
          {
            name: "背景",
            type: "bar",
            // 背景宽度
            barWidth: 15,
            barGap: "-100%",
            data: salvProMax,
            itemStyle: {
              normal: {
                color: "#305067",
                barBorderRadius: 30
              }
            }
          }
        ]
      };
      window.addEventListener("resize", () => echart.resize(), false);
      option && myChart.setOption(option);
    },

//最后在mounted中调用这个方法

柱状图折线图x轴y轴显示不全解决：在对应的x或y轴中设置

axisLabel: {

interval:0, //0代表全部显示

3d柱状图加折线图，含折线拐点样式

效果：

<template>
     <div class="echarts" id='charts2' ></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
// import "echarts/lib/chart/bar"
export default {props: {
    x: {
      type: Array
    },
    y: {
      type: Array
    },
    // 折线数据
    brokendata: {
      type: Array
    },
    // 柱状数据
    columndata: {
      type: Array
    }
  },
  name: "",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.getchart();
  },
  methods: {
    getchart() {
      console.log(this.columndata);
      // let rightbotcolumndata1 = this.rightbotcolumndata;
      var myChart = echarts.init(document.getElementById("charts2"));
      let option = {
        // backgroundColor: "#041730",
        grid: {
          top: "20%",
          bottom: "20%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true
            }
          }
        },
        legend: {
          data: ["面积", "数量"],
          // data: ["同比增长量", "驾驶人保有量"],

          top: "8%",
          textStyle: {
            color: "#ffffff"
          }
        },
        xAxis: {
          // data: ["2015", "2016", "2017", "2018", "2019"],
          data: this.x,
          offset: 12,
          axisLine: {
            show: false
          }