Echarts

已于 2023-06-09 20:22:55 修改
阅读量43 收藏
点赞数
分类专栏： vue组件 # echarts 文章标签： echarts javascript
于 2023-06-08 19:55:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61103773/article/details/131114799
版权

目录

使用前准备

 添加公共方法src/assets/js/getEchartsData.js

在main.js引入

使用组件

以下不需要使用前准备

使用前准备

  1. npm install echarts --save
  2. ECharts 在线构建 定制 echarts 的样式 主题下载→json版本→复制
  3. 创建assets/js/theme.js文件 const常量=复制出的json export {常量1,常量2}
  • 例：
const black =
{
    "color": [
        "#fc97af",
        "#87f7cf",
        "#f7f494",
        "#72ccff",
        "#f7c5a0",
        "#d4a4eb",
        "#d2f5a6",
        "#76f2f2"
    ],
    "backgroundColor": "rgba(41,52,65,0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#ffffff"
        },
        "subtextStyle": {
            "color": "#dddddd"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": "4"
        },
        "lineStyle": {
            "width": "3"
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true
    },
    "radar": {
        "itemStyle": {
            "borderWidth": "4"
        },
        "lineStyle": {
            "width": "3"
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": 0,
            "barBorderColor": "#ccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#fc97af",
            "color0": "transparent",
            "borderColor": "#fc97af",
            "borderColor0": "#87f7cf",
            "borderWidth": "2"
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        },
        "lineStyle": {
            "width": "1",
            "color": "#ffffff"
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true,
        "color": [
            "#fc97af",
            "#87f7cf",
            "#f7f494",
            "#72ccff",
            "#f7c5a0",
            "#d4a4eb",
            "#d2f5a6",
            "#76f2f2"
        ],
        "label": {
            "color": "#293441"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#999999",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#893448"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,178,72,1)",
                "borderColor": "#eb8146",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(137,52,72)"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#999999",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#893448"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,178,72,1)",
                "borderColor": "#eb8146",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(137,52,72)"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#757575"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#d6d6d6"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#757575"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#d6d6d6"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#757575"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#d6d6d6"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#757575"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#d6d6d6"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#999999"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#666666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#d6d6d6"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#cccccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#cccccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#87f7cf",
            "width": 1
        },
        "itemStyle": {
            "color": "#87f7cf",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#87f7cf",
            "borderColor": "#87f7cf",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#fc97af",
            "borderColor": "#fc97af"
        },
        "label": {
            "color": "#87f7cf"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#f7f494"
            },
            "controlStyle": {
                "color": "#87f7cf",
                "borderColor": "#87f7cf",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#87f7cf"
            }
        }
    },
    "visualMap": {
        "color": [
            "#fc97af",
            "#87f7cf"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(255,255,255,0)",
        "dataBackgroundColor": "rgba(114,204,255,1)",
        "fillerColor": "rgba(114,204,255,0.2)",
        "handleColor": "#72ccff",
        "handleSize": "100%",
        "textStyle": {
            "color": "#333333"
        }
    },
    "markPoint": {
        "label": {
            "color": "#293441"
        },
        "emphasis": {
            "label": {
                "color": "#293441"
            }
        }
    }
}


const light =
{
    "color": [
        "#516b91",
        "#59c4e6",
        "#edafda",
        "#93b7e3",
        "#a5e7f0",
        "#cbb0e3"
    ],
    "backgroundColor": "rgba(0,0,0,0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#516b91"
        },
        "subtextStyle": {
            "color": "#93b7e3"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": "2"
        },
        "lineStyle": {
            "width": "2"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": true
    },
    "radar": {
        "itemStyle": {
            "borderWidth": "2"
        },
        "lineStyle": {
            "width": "2"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": true
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": 0,
            "barBorderColor": "#ccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#edafda",
            "color0": "transparent",
            "borderColor": "#d680bc",
            "borderColor0": "#8fd3e8",
            "borderWidth": "2"
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaaaaa"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": true,
        "color": [
            "#516b91",
            "#59c4e6",
            "#edafda",
            "#93b7e3",
            "#a5e7f0",
            "#cbb0e3"
        ],
        "label": {
            "color": "#eeeeee"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#516b91",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "#a5e7f0",
                "borderColor": "#516b91",
                "borderWidth": 1
            },
            "label": {
                "color": "#516b91"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#516b91",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "#a5e7f0",
                "borderColor": "#516b91",
                "borderWidth": 1
            },
            "label": {
                "color": "#516b91"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#999999"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#666666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#999999"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#cccccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#cccccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#8fd3e8",
            "width": 1
        },
        "itemStyle": {
            "color": "#8fd3e8",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#8fd3e8",
            "borderColor": "#8fd3e8",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#8fd3e8",
            "borderColor": "#8a7ca8"
        },
        "label": {
            "color": "#8fd3e8"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#8fd3e8"
            },
            "controlStyle": {
                "color": "#8fd3e8",
                "borderColor": "#8fd3e8",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#8fd3e8"
            }
        }
    },
    "visualMap": {
        "color": [
            "#516b91",
            "#59c4e6",
            "#a5e7f0"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(0,0,0,0)",
        "dataBackgroundColor": "rgba(255,255,255,0.3)",
        "fillerColor": "rgba(167,183,204,0.4)",
        "handleColor": "#a7b7cc",
        "handleSize": "100%",
        "textStyle": {
            "color": "#333"
        }
    },
    "markPoint": {
        "label": {
            "color": "#eeeeee"
        },
        "emphasis": {
            "label": {
                "color": "#eeeeee"
            }
        }
    }
}

export {black,light}

 添加公共方法src/assets/js/getEchartsData.js

// getBarData  getPieData
export default {
  install(Vue) {
    //柱状图、折线图数据整理
    //data.title-标题
    //data.height-高度
    //data.type-'line'/'bar'
    //data.selected-legend各项选中状态
    //data.series-series
    //data.name-legend
    //data.data-x轴
    //data.trigger-提示框同时展示同x轴的数据，可选'item'单独展示
    //data.color-背景颜色根据x轴坐标渐变
    //data.colorName-渐变背景标题
    //data.rotate-x轴文字倾斜度
    //data.export-导出表格功能（需后端接口）
    //data.seriesColor-一个series内的柱状图不同颜色
    //data.barColorList-一个series内的柱状图不同颜色的数组
    //data.noShowSymbol,是否不显示折线点
    //data.chalk-'black'黑暗主题 'light'亮色
    Vue.prototype.getBarData = function(data){
      var series = [];
      let barColorList = data.barColorList || [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ];
      if (!data?.series?.length) {
        return;
      }
      if (data.dataZoom) {
        var dataZoom = [
          {
            show: true,
            type: "slider",
            startValue: 0,
            endValue: data.dataZoom?.end || 5,
          },
        ];
      } else {
        var dataZoom = [
          {
            show: false,
          },
        ];
      }

      let seriesData = {
        name: "",
        barMaxWidth: 50,
        top: data.title ? "10%" : 0,
        type: data.type || "line",
        symbolSize: 5,
        data: [],
        smooth: true,
        showSymbol: true,
        showSymbol: !data.noShowSymbol,
      };
      if (!data.series.length) return;
      for (let i in data.series) {
        seriesData.data = data.series[i];
        seriesData.name = data.name[i];
        if (data.seriesType) {
          seriesData.type = data.seriesType[i];
        }
        series.push({
          ...seriesData,
        });
      }
      if (data.color) {
        series.unshift({
          itemStyle: {
            color: "#000",
          },
          name: "",
          barMaxWidth: 50,
          top: data.title ? "10%" : 0,
          type: data.type || "line",
          data: [],
          smooth: true,
          showSymbol: true,
        });
        let length = data.color.length;
        series[0].markArea = {
          label: {
            position: "inside",
            rotate: length > 6 ? -10 : 0,
            color: "#000",
          },
          data: [],
        };
        data.color.forEach((e, i) => {
          let a = 50 + i * (240 / length);
          let b = 205 - i * (240 / length);
          let c = 125 + i * (120 / length);
          this.colorList[e.toString()] = `rgba(${a}, ${c}, ${b}, 0.2)`;
          series[0].markArea.data.push([
            {
              name: data.colorName[i],
              xAxis: e,
              itemStyle: {
                color: `rgba(${a}, ${c}, ${b}, 0.3)`,
              },
            },
            {
              xAxis: data.color[i + 1],
            },
          ]);
        });
        this.$emit("colorList", this.colorList);
      }
      if (data.seriesColor && series.length == 1) {
        // //console.log(series);
        for (let i in series[0].data) {
          let value = series[0].data[i];
          series[0].data[i] = {
            value: value,
            itemStyle: { color: barColorList[i] },
          };
        }
        // //console.log(series[0].data);
      }
      let yAxis = {
        type: "value",
        boundaryGap: [0, 0.01],
        splitLine: {
          //网格线
          show: false,
        },
      };
      if (data.yMin) {
        yAxis.min = data.yMin;
      }
      if (data.yMax) {
        yAxis.max = data.yMax;
      }
     
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: data.title ? data.title : "",
          left: "center",
        },
        animation: data.animation == false ? data.animation : true,
        animationDuration: 5, //这里两个动画设置可以让图表更顺滑
        animationEasing: "cubicInOut",
        tooltip: {
          confine: true,
          trigger: data.trigger ? data.trigger : "axis",
          show: data.tooltipShow == false ? data.tooltipShow : true,
          formatter: function (params, ticket, callback) {
            let htmlStr = "";
            for (let i = 0; i < params.length; i++) {
              let param = params[i];
              let xName = param.name; //x轴的名称
              let seriesName = param.seriesName; //图例名称
              let value = param.value; //y轴值
              let color = param.color; //图例颜色

              //圆点后面显示的文本
              if (value !== "null" && value !== "-") {
                if (i === 0) {
                  htmlStr += xName + "<br/>"; //x轴的名称
                }
                htmlStr += "<div>";
                //为了保证和原来的效果一样，这里自己实现了一个点的效果
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  color +
                  ';"></span>';

                // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
                //htmlStr += '<span style="color:'+color+'">';
                htmlStr += seriesName + "：" + value;

                // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
                //htmlStr += '</span>';

                htmlStr += "</div>";
              }
            }
            return htmlStr;
          },
        },
        legend: {
          show: data.legendShow == false ? false : true,
          type: "scroll",
          top: data.title ? "10%" : "0",
          left: "center",
          selected: data.selected || {},
          itemHeight: data.legendHeight || 12,
          // textStyle: {
          //   //图例字体大小
          //   fontSize: 12,
          // },
        },
        dataZoom: dataZoom,
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: false,
              readOnly: true,
              optionToContent: function (opt) {
                if (!opt) return;
                let axisData = opt.xAxis[0].data || []; //坐标数据
                let series = opt.series || []; //折线图数据
                let tdHeads = "<td  >时间</td>"; //表头
                let tdBodys = ""; //数据
                if (!series.length || !axisData.length) return;
                series.forEach(function (item) {
                  //组装表头
                  tdHeads += `<td >${item.name}</td>`;
                });
                let table = `<table border="1" ><tbody><tr>${tdHeads} </tr>`;
                for (let i = 0, l = axisData.length; i < l; i++) {
                  for (let j = 0; j < series.length; j++) {
                    //组装表数据
                    tdBodys += `<td>${series[j].data[i]}</td>`;
                  }
                  table += `<tr><td >${axisData[i]}</td>${tdBodys}</tr>`;
                  tdBodys = "";
                }
                table += "</tbody></table>";
                return table;
              },
            },
            magicType: {
              show: false,
              type: ["line", "bar"],
            },
            restore: {
              show: false,
            },
            myTool1: {
              show: data.export ? true : false,
              title: "导出",
              icon: "path://M996.01 1024H27.99c-7.318 0-13.825-2.837-19.5-8.49-5.653-5.675-8.49-12.16-8.49-19.5 0-8.02 2.837-14.677 8.49-20.01 5.675-5.333 12.16-8 19.5-8h968.02c7.318 0 13.825 2.667 19.5 8 5.653 5.333 8.49 11.99 8.49 20.01 0 7.318-2.837 13.825-8.49 19.5-5.675 5.653-12.16 8.49-19.5 8.49z m-69.013-648c5.334 5.333 7.83 11.99 7.51 20.01-0.342 8-3.84 14.998-10.496 20.993L529.984 811.989l-4.992 2.006-2.987 2.986a44.8 44.8 0 0 1-22.997 0l-2.005-2.986a6.784 6.784 0 0 1-5.014-1.984L97.003 417.003a33.216 33.216 0 0 1-6.998-21.014c0-8 2.496-14.506 7.488-19.498 5.014-4.992 11.84-7.488 20.502-7.488 8.682 0 15.338 2.346 20.01 6.997l347.968 346.005V27.99c0-8 2.496-14.656 7.51-19.989C498.496 2.667 504.66 0 512 0s13.504 2.667 18.496 8c5.013 5.333 7.51 11.99 7.51 20.01v693.974l347.967-345.963c4.672-4.672 11.35-6.997 20.011-6.997s15.659 2.347 20.992 6.997z",
              onclick: () => {
                this.$emit("exportList");
              },
            },
          },
        },
        grid: {
          top: data.title ? (data.color ? "25%" : "20%") : "10%",
          bottom: data.gridBottom ? data.gridBottom : 50,
          left: data.yMax
            ? data.yMin.indexOf("-") != -1
              ? (data.yMax.length + 2) * 8
              : (data.yMax.length + 1) * 8
            : 60,
          right: 20,
        },
        xAxis: {
          show: data.xAxisShow == false ? data.xAxisShow : true,
          type: "category",
          data: data.data,
          axisTick: {
            show: true,
          },
          axisTick: {
            //刻度
            show: false,
          },
          axisLabel: {
            show: data.axisShow == false ? data.axisShow : true,
            interval: 0,
            rotate: data.rotate ? data.rotate : 0,
          },
        },
        yAxis: yAxis,
        series: series,
      };
      return option
    },
     //饼图数据整理
     Vue.prototype.getPieData = function(data){
        if (!data?.series?.length) {
        return;
      }
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: data.title || "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: data.title&&!data.legendBottom ? "10%" : "auto",
          show: data.legendShow == false ? false : true,
          type: "scroll",
          // orient: 'vertical',
          right: 10,
          bottom: data.legendBottom?'0':'auto',
        },
        series: [
          {
            top: data.title ? "20%" : "0",
            type: "pie",
            radius:data.radius|| ["45%", "70%"],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 10,
              borderColor: "transparent",
            },
            label: {
              show: true,
              color:data.chalk=='black'?'#dddddd':'#999999',
              textBorderColor:'transparent',
              formatter:data.formatter|| "{b}",
            },
            labelLine: {
              //引导线设置
              length: 15,
              length2: 35,
              maxSurfaceAngle: 80,
            },
            data: data.series,
          },
        ],
      };
      if (data.colorList) {
        option.color = data.colorList;
      }
      if (data.label) {
        option.legend.textStyle = data.label.textStyle;
        option.series.forEach((e, i) => {
          option.series[i].label = data.label;
        });
      }
      return option
     }
  }}

在main.js引入

import getEchartsData from '@/assets/js/getEchartsData'
Vue.use(getEchartsData)

使用组件

以下不需要使用前准备

三水_森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts绘制图表
m0_56628949的博客
09-28 4629
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：开发工具VS；关键技术js 作者：空白 撰写时间：2021年9月28日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 首先，要将ECharts的脚本文件引入在项目中 在绘图前我们需要为ECharts准备一个定义了高度的DOM容器 在页面加载完后调用setWidth方法 .
echarts文档离线
10-10
echarts文档离线
ECharts社区 合集整理
sanghongxv的博客
07-08 4万+
持续更新......
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
echarts下载
HenryXun的博客
11-16 6681
关于echarts下载，官网上有三种方法，我这里推荐使用第三种方法：选择需要的模块，在线定制下载。 可以自由选择需要的图表、坐标系、组件进行打包下载。 这里我选择的是5.2.2版本，并且选择了所有的图表、坐标系、组件，其他选项中包括的SVG渲染、兼容IE8、工具集和代码压缩都选择了，可谓是真全呐，哈哈~~~ 选择下载后，会loading一会儿，最后得到一份echarts.min.js文件 完成了，操作很方便。 ...
Echarts y轴相关配置
蓑笠翁
09-03 2万+
使用Echarts的坐标轴配置，如y轴位置，y轴偏移量、y轴刻度、y轴最大最小值、次刻度、轴间隔等；
ECharts官网地址
weixin_50680057的博客
10-05 2万+
https://echarts.apache.org/zh/index.html
echarts地图3D效果
qq_35973440的博客
02-27 5838
echart图表3D效果 利用gco
echarts 节点拖拽
weixin_43931625的博客
11-09 3904
echarts 节点拖拽
ECharts 饼状图颜色设置
qq_38778882的博客
05-10 9402
ECharts 饼图颜色设置
echarts CDN 地址
yuanwen52的博客
09-17 5188
echarts (v5.1.2) - ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 P
echarts2.2.7
06-28
有静态文档可以参考，解压直接打开
推荐了多个详细的echarts资源
09-26
Echarts 资源大汇总 Echarts 是一个基于 JavaScript 的数据可视化图表库，由百度株式会社开发和维护，可以轻松地在网页中添加交互式的图表。下面是推荐的多个详细的 Echarts 资源，旨在帮助开发者快速上手 Echarts ...
echarts-4.4.0
05-19
echarts-4.4.0
echarts 中国地图json
01-12
echarts 中国地图json
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 507
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 340
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1223
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 528
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
echarts的echarts
01-09
echarts是一个纯JavaScript的图表库，它提供了丰富多样的数据可视化图表，可以用于展示各种类型的数据。它兼容绝大部分的浏览器，并且具有直观、生动、可交互、可高度个性化定制的特点。echarts底层依赖于轻量级的canvas类库ZRender，这使得echarts具有更好的性能和用户体验。 如果你想深入了解echarts的特性和使用方法，你可以点击文档下拉单的特性介绍，这将帮助你更好地了解echarts的功能和特点。此外，你还可以点击教程，教程的第一课将教你如何使用第一个echarts模板实例，这将帮助你快速上手echarts的使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值