温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Element中如何使用ECharts

发布时间:2022-07-29 17:29:01 阅读:375 作者:iii 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本文小编为大家详细介绍“Element中如何使用ECharts”,内容详细,步骤清晰,细节处理妥当,希望这篇“Element中如何使用ECharts”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    一、引入ECharts

    1、直接引入echarts (安装echarts项目依赖)

    npm install echarts --save

    2、全局引入 (我们安装完成之后,可以在main.js中全局引入 echarts)

    import echarts from "echarts";
    Vue.prototype.$echarts = echarts;

    3、我们可以将Echar封装成组件的形式,方便调用

    封装在组件中:封装成 Echarts.vue 文件放在ElementUI前端框架中

    <template>
      <div ref="chartDom" ></div>
    </template>
    
    <script>
    import * as echarts from 'echarts';
    import debounce from "lodash/debounce";
    import { addListener, removeListener} from "resize-detector";
    
    export default {
      props: {
        option: {
          typeObject,
          default()=> {}
        }
      },
      watch: {
        // option(val) {
        //   this.chart.setOption(val);
        // },
        option: {
          handler(val) {
            this.chart.setOption(val);
          },
          deeptrue
        }
      },
      created() {
        this.resize = debounce(this.resize300);
      },
      mounted() {
        this.renderChart();
        addListener(this.$refs.chartDomthis.resize);
      },
      beforeDestroy() {
        removeListener(this.$refs.chartDomthis.resize);
        this.chart.dispose();
        this.chart = null;
      },
      methods:{
        resize(){
          this.chart.resize();
        },
        renderChart() {
          this.chart = echarts.init(this.$refs.chartDom);
          this.chart.setOption(this.option);
        }
      },
    }
    </script>
    <style>
    </style>

    4、此时我们可以通过Echart官网引入我们需要的图

    例如:以所选的折柱混合图为例

    Element中如何使用ECharts

    引入(需要引入Echarts刚刚封装好的组件)

    从Echart官网获取对应图的代码

    Element中如何使用ECharts

    引入代码:

    <template>
        <div>
            <el-row>
              <Echarts :option="option"  />
            </el-row>
      </div>
    </template>
    
    <script>
        
    //引入Echart的包
    import Echarts from "../../components/charts/Echarts";       
    export default {
      components:{
        Echarts,
      },
      data(){
        return{
          option:{
      		tooltip: {
        	trigger'axis',
        	axisPointer: {
          	type'cross',
          	crossStyle: {
            color'#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { showtruereadOnlyfalse },
          magicType: { showtruetype: ['line''bar'] },
          restore: { showtrue },
          saveAsImage: { showtrue }
        }
      },
      legend: {
        data: ['Evaporation''Precipitation''Temperature']
      },
      xAxis: [
        {
          type'category',
          data: ['Mon''Tue''Wed''Thu''Fri''Sat''Sun'],
          axisPointer: {
            type'shadow'
          }
        }
      ],
      yAxis: [
        {
          type'value',
          name'Precipitation',
          min0,
          max250,
          interval50,
          axisLabel: {
            formatter'{value} ml'
          }
        },
        {
          type'value',
          name'Temperature',
          min0,
          max25,
          interval5,
          axisLabel: {
            formatter'{value} °C'
          }
        }
      ],
      series: [
        {
          name'Evaporation',
          type'bar',
          tooltip: {
            valueFormatterfunction (value) {
              return value + ' ml';
            }
          },
          data: [
            2.04.97.023.225.676.7135.6162.232.620.06.43.3
          ]
        },
        {
          name'Precipitation',
          type'bar',
          tooltip: {
            valueFormatterfunction (value) {
              return value + ' ml';
            }
          },
          data: [
            2.65.99.026.428.770.7175.6182.248.718.86.02.3
          ]
        },
        {
          name'Temperature',
          type'line',
          yAxisIndex1,
          tooltip: {
            valueFormatterfunction (value) {
              return value + ' °C';
            }
          },
          data: [2.02.23.34.56.310.220.323.423.016.512.06.2]
        }
      ]
    };
      },
      createdfunction () {
    
      },
      methods:{
          
      }
    }
    </script>
    <style scoped>
    </style>

    二、效果展示

    Element中如何使用ECharts

    读到这里,这篇“Element中如何使用ECharts”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

    亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI

    开发者交流群×