动态生成echart图（拖拽生成echart）并导出json

已于 2022-02-15 10:16:59 修改
阅读量1.5k 收藏 9
点赞数
文章标签： json elementui vue.js echarts 前端
于 2022-02-15 09:46:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lalalademax/article/details/122936708
版权

这只是一个简单的echart生成功能进一步的效果优化暂无，大家也可以借鉴 form-generator 的方案进行改造（这是开源的动态生成页面项目）

组合页面代码

<template>
  <div class="hello">
    <div style="height: 100%;flex: 1;overflow-y: auto">
      <vuedraggable :group="{name:'menu',pull:'clone',put:false}" :sort="false" :list="echartArr" @end="addOne" :clone="cloneArr">
          <div v-for="(item ,index) in echartArr" :key="index">
            {{item.name}}
          </div>
      </vuedraggable>
    </div>
    <div  class="right">
      <el-button @click="sumbitEchart">保存Echart</el-button>
      <el-button @click="seeEchart=true">预览</el-button>
      <el-button @click="exportJSON">导出JSON</el-button>
      <vuedraggable  group='menu' :animation="340" :list="echartShow"  style="height: 90%;overflow-y: auto;border: 1px solid #47b347;width: 100%">
          <el-col v-for="(item ,index) in echartShow" :key="index" :span="item.style.span"
                  :style="{marginTop:item.style.marginTop+'px',marginBottom:item.style.marginBottom,marginLeft:item.style.marginLeft+'px',marginRight:item.style.marginRight+'px'}"
          >
            <div @click="clickEchart(item)">
              <echart :options="item.option" :span="item.style.span"  :height="item.height" :id="item.id" />
            </div>
          </el-col>
      </vuedraggable>
    </div>
    <div style="flex: 1;padding-right: 15px;height: 100%;overflow-y: auto;padding-left: 15px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组件" name="zujian">
          <el-form v-if="jsonEchart" label-position="top">
            <el-form-item label="ID">
              <el-input  v-model="currentEchart.id"  style="width: 80%" :disabled="false"/>
            </el-form-item>
            <el-form-item label="图表名称">
              <el-input  v-model="currentEchart.option.title.text" @blur="handleName" style="width: 80%"/>
            </el-form-item>
            <el-form-item label="高度">
              <el-input-number v-model="currentEchart.height" />
            </el-form-item>
            <el-form-item label="栅格宽度">
              <el-input-number v-model="currentEchart.style.span" />
            </el-form-item>
            <el-form-item label="外边距">
              <el-row>上<el-input-number v-model="currentEchart.style.marginTop" /></el-row>
              <el-row>下<el-input-number v-model="currentEchart.style.marginBottom" /></el-row>
              <el-row>左<el-input-number v-model="currentEchart.style.marginLeft" /></el-row>
              <el-row>右<el-input-number v-model="currentEchart.style.marginRight" /></el-row>
            </el-form-item>
          </el-form>
          <el-empty v-if="!jsonEchart" description="暂无数据"></el-empty>
        </el-tab-pane>
        <el-tab-pane  label="Echart" name="echart">
          <el-button  @click="drawer=true">更改数据</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-drawer
        title="Echart图表数据"
        :visible.sync="drawer"
        :size="800"
        >
                <b-code-editor
                    v-if="jsonEchart"
                    v-model="jsonEchart"
                    :auto-format="true"
                    :smart-indent="true"
                    theme="dracula"
                    :indent-unit="2"
                    :line-wrap="true"
                    :height="'800px'"
                    ref="editor"
                />
                <el-button type="primary" @click="onSubumit">保存</el-button>
    </el-drawer>
    <el-dialog title="预览" :visible.sync="seeEchart" width="60%">
      <el-row>
        <el-col v-for="(item ,index) in echartShow" :key="index" :span="item.style.span"
                :style="{marginTop:item.style.marginTop+'px',marginBottom:item.style.marginBottom,marginLeft:item.style.marginLeft+'px',marginRight:item.style.marginRight+'px'}"
        >
          <echart v-if="seeEchart" :options="item.option" :span="item.style.span"  :height="item.height" :id="item.id" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable';
import FileSaver from 'file-saver'
import echart from "./echart";
export default {
  name: 'HelloWorld',
  components: { vuedraggable ,echart},
  data(){
    return{
      activeName:'zujian',
      echartArr:[
        {
          name:'柱状图',
          id:'zzt',
          option:{
            title: {
              text: '柱状图',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              }
            ]
          },
          style:{
            marginTop:'0',
            marginBottom:'0',
            marginLeft:'0',
            marginRight:'0',
            span:24
          },
          height:300
        },
        {
          name:'折线图',
          id:'zxt',
          style:{
            marginTop:'0',
            marginBottom:'0',
            marginLeft:'0',
            marginRight:'0',
            span:24
          },
          option: {
            title: {
              text: '折线图',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
              }
            ]
          },
          height:300
        },
        {
          name:'饼图',
          id:'bt',
          style:{
            marginTop:'0',
            marginBottom:'0',
            marginLeft:'0',
            marginRight:'0',
            span:24
          },
          option: {
            title: {
              text: '饼图',
              subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: 'Search Engine' },
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 484, name: 'Union Ads' },
                  { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          height:300
        },
        {
          name:'折柱混合图',
          id:'zzhh',
          style: {
            marginTop:'0',
            marginBottom:'0',
            marginLeft:'0',
            marginRight:'0',
            span:24
          },
          option : {
            title: {
              text: '折柱混合图',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            legend: {
              data: ['Evaporation', 'Precipitation', 'Temperature'],
              left: 'left'
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value} ml'
                }
              },
              {
                type: 'value',
                name: 'Temperature',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value} °C'
                }
              }
            ],
            series: [
              {
                name: 'Evaporation',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' ml';
                  }
                },
                data: [
                  2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
              },
              {
                name: 'Precipitation',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' ml';
                  }
                },
                data: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
              },
              {
                name: 'Temperature',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' °C';
                  }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
              }
            ]
          },
          height: 300
        }
      ],
      echartShow:[],
      currentEchart:'',
      jsonEchart:'',
      oneId:'',
      drawer:false,
      seeEchart:false
    }
  },
  mounted() {
// vuedraggle 拖拽在火狐浏览器的阻断
    document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation();}
  },
  methods:{
    cloneArr(e){
      let arr=JSON.parse(JSON.stringify(e))
// 动态生成随机id
      arr.id=Math.random().toString(36).substr(2)
      this.oneId=JSON.parse(JSON.stringify(arr.id))

      this.jsonEchart=''
      this.echartShow.push(arr)
      this.currentEchart=arr
      this.$nextTick(()=>{
        this.jsonEchart=JSON.stringify(arr.option)
      })
    },
    clickEchart(item){
      this.jsonEchart=''
      this.currentEchart=item
      this.oneId=JSON.parse(JSON.stringify(item.id))
      this.activeName='zujian'
      this.$nextTick(()=>{
        this.jsonEchart=JSON.stringify(item.option)
      })
    },
    // 检测json格式
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          var obj=JSON.parse(str);
          if(typeof obj == 'object' && obj ){
            return true;
          }else{
            return false;
          }

        } catch(e) {
          return false;
        }
      }else if (typeof str == 'object'  && str) {
        return true;
      }
    },
    onSubumit(){
      if (!this.isJSON(this.jsonEchart)){
        this.$message.error(`json格式错误`)
        return false
      }
      this.echartShow.map((item)=>{
        if(item.id===this.oneId){
          item.option=JSON.parse(this.jsonEchart)
        }
      })
      this.$message.success('json格式正确')
    },
    // 更改名称
    handleName(){
      this.jsonEchart=''
      this.$nextTick(()=>{
        this.jsonEchart=JSON.stringify(this.currentEchart.option)
        console.log(this.jsonEchart)
      })
    },
    // 保存echarts图
    sumbitEchart(){
console.log(this.echartShow)
    },
    // 导出JSON
    exportJSON(){
      // const
      const data=JSON.stringify(this.echartShow,null,2)
      const name = 'Echart' + new Date().getTime() + '.json'
      console.log(new Date("month dd,yyyy hh:mm:ss"),1111)
      const blob = new Blob([data], {type: ''})
      FileSaver.saveAs(blob, name)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped >
.hello{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  display: flex;
}
.right{
  flex: 4;
  height: 100%;
  /*background: navy;*/
  /*overflow-y: auto;*/
}
.right >div{
  /*min-height: 200px;*/
  width: 100%;
}
.CodeMirror {
  font-family: monospace;
  height: 800px !important;
  color: black;
  direction: ltr;
}
</style>

echart组件

<template>
  <div class="chart-zone" :style="{ height: height+'px' }">
    <div ref="echartdiv" :style="{ height: height+'px', width: width }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// let chart = null // chart不能在此定义，不然同一个页面有多个chart时，可能会导致数据渲染错乱
export default {
  name: "echart",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    span:{
      type:Number
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: Number,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // chart: null, // chart不能是响应式的，不然tooltip中的trigger为axis时会没有效果
    };
  },
  watch: {
    options: {
      handler(options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true);
      },
      deep: true,
    },
    height(val){
       this.chart.dispose()
      this.$nextTick(()=>{
        this.initChart();
      })
    },
    span(val){
      this.chart.dispose()
      this.$nextTick(()=>{
        this.initChart();
      })
    }
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = null;
      // 初始化echart
        this.chart = echarts.init(this.$refs.echartdiv);
        this.chart.setOption(this.options, true);
    },
  },
};
</script>

<style scoped>
.chart-zone {
  position: relative;
  width: 100%;
}
</style>

效果


导出json文件内容

在线更改echart内容

 

二刺螈哪有二刺螈
关注
Vue框架中对ECharts图表进行自定义绘制和拖拽
小楠子的博客
12-04 5512
Vue框架中对ECharts图表进行自定义绘制和拖拽的实现 项目需要实现自定义图表X轴和Y轴以及自己绘制图表的功能，并且可以手动拖动修改图表中线条走势。实现的效果如下： 实现以上效果，HTML代码如下： <template> <div class="ddosData"> <el-form :inline="true" :model="echartsFor...
vue 关于echart实现label拖拽的实现
qq_42356790的博客
04-28 3017
echarts需要拖拽
拖拽示例echarts图表至目标区域渲染，动态配置其参数配置
最新发布
xzy__007的博客
04-18 691
【代码】拖拽示例echarts图表至目标区域渲染，动态配置其参数配置。
Vue+Echart，实现拖拽和自定义功能
aijinbo0796的博客
06-14 2015
公司前一段时间有需求，要实现echart组件化，实现自定义添加、删除、修改、拖拽等功能，于是就抽时间实现了下 利用vue+vuex+axiso+vuedraggable+elementui+mock实现,直接上图吧，代码在git，稍后会发地址 1、默认主页，不可拖拽 2、点击编辑，可进行图表的拖拽、删除、修改名称功能 3、点击添加，可以添加自定义图表，当然里面都是固定自己...
快速生成echarts基础配置 ——（包含拖拽）
very nice
09-27 1534
提示：关于echarts问题最近项目中，遇到一些echarts图表的问题，简单的柱状图、折线图不在多说，直接进入官网粘贴代码就直接ok今天总结一下近期echarts中，拖拽图表，近期写项目迫不得已看了看echarts的配置文档，也就自己封装了下方法，可以快速的生成一个图表（当然，只是一个简单的配置），如果你有能力，可以在我的基础上进行改造提示：快速生成echarts配置项以下代码中的 dataZoom 是echarts中拖拽的配置，不需要可以直接delete。
echart地图JSON JS
05-03
在“echart地图JSON JS”这个主题中，我们主要关注的是ECharts如何结合JSON数据来实现动态的地图可视化。 ECharts中的地图图表是一种特殊的图表类型，它可以展示中国各个省份、城市甚至更细化的区域数据。这种地图...
echart拓扑图单节点拖拽互不影响demo
04-22
在这个"echart拓扑图单节点拖拽互不影响demo"中，`index.vue`文件很可能是包含了ECharts实例创建、事件监听和数据管理的Vue组件代码。具体实现细节，例如如何配置ECharts选项，如何处理拖拽事件，以及如何与后端交互...
react-echart-demo:这是一个react集成echart并实现动态添加，可拖拽，可配置图表的demo例子
05-18
这是一个react集成echart并实现动态添加，可拖拽，可配置图表的demo例子，功能如下： 用户可以动态添加某类型的图表到指定位置 用户可以任意拖拽各个添加的图表 用户可以配置任意一个图表 分支demo介绍 demo1：实现...
jsplumb-:基于jsplumb制作的拖拽流程图，自动生成json数据，框架是基于H+的外壳
04-29
jsplumb 是一个强大的 JavaScript 库，专注于构建可拖动和连接的用户界面元素，尤其适用于创建流程图、工作流图表和网络拓扑图。它提供了丰富的功能，如动态连接、预定义形状、可自定义的样式和事件处理，使得开发...
C#动态生成Label控件并拖动位置
03-16
C#动态生成Label控件并拖动位置，测试时你可以先点击“动态生成Label”按钮，然后会生成一个带文字的标签，这个标签是可以拖动改变位置的，并显示出最后停留位置的坐标信息。 运行环境：Visual Studio2010
Echart动态加载数据
01-18
ECharts动态加载数据,传递给界面层map,显示相应的数据.
Echart数据动态更新
03-07
Echart曲线图通过AJAX传值，从数据库获取数据动态更新
echarts实现折线图的拖拽效果
10-15
主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 结合 echarts 原生 html5 实现拖拽排版报表系统
weixin_34281537的博客
03-12 1345
前言 不知道各位 coder 有没有碰到过许多重复的业务需求，比如排版相类似的报表，只不过是顺序稍微换了一下，就是一个新的页面，虽然基于模板思想来写的话也能减少不少代码，但是相对的不那么方便，笔者最近就是碰到了类似的需求，忍无可忍，遂该项目便诞生了了。 正文 演示 gif 图稍大，若加载不出来请稍等片刻 (..•˘_˘•..) 项目地址 如果觉得我有帮到什么忙的，欢迎 star，我会更有动力...
echart动态图表
土豆™
10-23 595
echart动态图表
echart 动画 饼图_巧用EChart画动态饼图
weixin_36199877的博客
12-23 1467
生物信息学领域算法对于解决复杂生物学问题非常重要，随着NGS的发展对于算法需求也越来越多，同时也伴随着对数据可视化的需求的增加。以下小编将为大家介绍一种非常实用的动态可视化方法---Echarts，一个纯 Javascript 的图表库，可以在PC和移动设备上流畅运行，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类...
echart 拖拽数据进echarts中显示
weixin_42684136的博客
07-13 654
echart 拖拽数据进echarts中显示
eCharts动态显示
Zohar974的博客
07-13 771
eCharts动态显示，eCharts动态数组
动态echarts图表
weixin_44556271的博客
06-27 497
开发工具与关键技术：vs mvc 作者： 撰写时间：2019年6月 23日 这篇的主要内容是用插件来制造动态图表，首先用到的插件是Echarts，下载后并将路径引用到HTML中，开始绘制图表，有许多不同类型的图表，并饼状图、折线图、柱状图等等，那么我不会演示完这几种图表。接着要做的是按照它的基础配置来完成这些图表的样式，接着将数据信息连接进图表中完成动态图表。 function DrawChar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值