iView(4) 使用ECharts案例

迷南。 2022-10-02 11:45 208阅读 0赞

#### 一、ECharts官网案例 ####

ECharts官网案例地址：https://www.echartsjs.com/examples/

#### 二、实现效果： ####

我准备在vue中所要实现的效果如下：

ECharts官网饼状图案例：https://echarts.baidu.com/examples/editor.html?c=pie-rich-text&theme=light  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]

#### 三、开始使用案例： ####

**1、安装echarts相关依赖**

npm install echarts -S

**2、Vue中全局引入echarts**  
在main.js文件中新增

// 全局引入echarts
    import echarts from "echarts";
    Vue.prototype.$echarts = echarts;

**3、代码**  
demo.vue

<template>
      <div>
        <Modal v-model="modal" width="60%" :title="titleValue[state]" :footer-hide="true" @on-visible-change="handleModalClose">
          <div id="myChartDemo" :style="{ width: '100%', height: '480px'}"></div>
        </Modal>
      </div>
    </template>
    <script> export default { name: "zhengqing-demo", data() { return { chartName: [], chartValue: [], modal: false, state: '',//分类： 0：报警 1：违章 titleValue: { titile1: "ECharts Demo", titile2: "ECharts Demo" }, }; }, methods: { open(row,state) { // 拿到类别信息 var typeList = row.typeList; console.log(typeList); if (state == 0) { this.state = "titile1"; } else if (state == 1) { this.state = "titile2"; } for (let i = 0; i < typeList.length; i++) { var name = typeList[i].title; var value = typeList[i].value; this.chartName.push(name); this.chartValue.push({ name: name,value: value}); } this.showEcharts("myChartDemo", this.chartName, this.chartValue); this.modal = true; }, showEcharts(id, Names, Values) { this.$nextTick(function() { this.drawPie(id, Names, Values); }); }, // 绘制饼状图 drawPie(id, Names, Values) { this.charts = this.$echarts.init(document.getElementById(id)); this.charts.on("click"); this.charts.setOption({ title: { text: 'ECharts Demo', subtext: '饼状图', left: 'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { bottom: 10, left: "center", data: Names // 扇形区域名称 }, series: [ { type: "pie", radius: "65%", center: ["50%", "50%"], selectedMode: "single", data: Values, // 扇形区域数据 itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } } ] }); }, handleModalClose(val) { if (!val) { this.chartName = []; this.chartValue = []; } } } }; </script>

**温馨小提示：**  
![在这里插入图片描述][20190618162103989.png]

1.  这里我使用的基于vue的iView中的modal对话框弹出echarts图表信息
2.  其中row是弹出对话框传过来的data数据，row下的typeList是echarts所需要的数据，state是传过来的modal对话框自定义标题状态
3.  其中typeList如上图，是我Java后端传过来的数据信息，这里相对应的数据改成自己需要的数据即可~

#### 四、最终实现效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]

#### 五、总结 ####

echarts使用起来相对入手简单，只需我们传入与其相对应的数据，复杂的图表信息多看看官方文档学习学习即可完成~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]: /images/20220112/ca12b291582644f8b59b43bed2dda34f.png
[20190618162103989.png]: /images/20220112/f54df8f091ef403bafb7575b2116b91c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]: /images/20220112/540c01c7a80a4f1995beb7fcc2b9315e.png