【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图

简介: 【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图

安装流程及示例

1.安装依赖

npm install echarts --save

2.在main.js中引入并挂载echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在需要使用echarts的页面引入echarts

import * as echarts from 'echarts'

4.在需要显示echarts地方引用以上定义的chart

  <div id="myChartjw" :style="{ width: '366px', height: '30px' }"></div>

5.在 mounted中加载echarts定义的方法

  mounted(){
      this.progressBar()
  },

6.在methods方法中定义一个方法,并在此方法中写echarts代码

  progressBar() {
            var chartDom4 = document.getElementById("myChartjw");
            var myChart4 = echarts.init(chartDom4);
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            option && myChart4.setOption(option);
        },

实现效果

目录
相关文章
|
2天前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
18 5
|
2天前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
10 1
|
2天前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
6 1
|
3天前
|
前端开发 JavaScript
vue + element-UI 图片压缩canvas【详解】(含完整demo)
vue + element-UI 图片压缩canvas【详解】(含完整demo)
8 1
|
2天前
|
JavaScript BI UED
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
5 0
|
2天前
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
4 0
|
3天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
1天前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
13 0
|
3天前
|
JavaScript
vue 图表 Echarts
vue 图表 Echarts
9 0