html引入vue组件，vue组件中使用echarts

最新推荐文章于 2024-05-08 20:18:06 发布
最新推荐文章于 2024-05-08 20:18:06 发布
阅读量3.1k 收藏 9
点赞数 2
分类专栏： vue html echarts 文章标签： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xy405580364/article/details/104769896
版权
vue 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏
echarts
4 篇文章 0 订阅
订阅专栏

将图设置代码写在vue的methods中，然后在mounted中调用

  • 得到echarts图
<div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>

var myChart = echarts.init(document.getElementById('pushed'));
  • 完整代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/multiple-select.min.css">
<script type="text/javascript" src="/js/jquery/multiple-select.min.js"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<!--新引入的css-->
<link rel="stylesheet" type="text/css" href="/css/master.css">
<link rel="stylesheet" type="text/css" href="/css/animate.delay.css">
<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="/css/description.scss">
<link rel="stylesheet" type="text/css" href="/css/element-ui.scss">
<link rel="stylesheet" type="text/css" href="/css/index.scss">
<link rel="stylesheet" type="text/css" href="/css/mixin.scss">
<link rel="stylesheet" type="text/css" href="/css/sidebar.scss">
<link rel="stylesheet" type="text/css" href="/css/transition.scss">
<link rel="stylesheet" type="text/css" href="/css/variables.scss">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--vue注册-->
<div id="app">
    <div class="dashboard-editor-container">
        <el-row class="box">
            <div class="box-body box-form">
                <el-form :inline="true" :model="formInline" size="mini">
                    <div class="conditions pull-left" style="width: calc(100% - 150px);">
                        <el-form-item label="统计时段">
                            <el-date-picker
                                    v-model="formInline.time"
                                    type="daterange"
                                    align="right"
                                    value-format="yyyy-MM-dd"
                                    :editable="false"
                                    @change="dateChange"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="知识使用情况">
                            <el-select size="mini" v-model="formInline.useSituation" placeholder="知识使用情况">
                                <template v-for="item in useSituations">
                                    <el-option :label="item.name" :value="item.code"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="知识体系">
                            <el-select size="mini" v-model="formInline.system" placeholder="知识体系">
                                <template v-for="item in systems">
                                    <el-option :label="item.name" :value="item.code"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="action pull-right">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>&#12288;开始分析</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-row>



        <el-row class="box">
            <div class="box-header">
                <h3 class="box-title">&#12288;知识使用占比</h3>
            </div>
            <div class="box-body">
                <div>
                    <div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>
                    <div id="adopted" style="width: 630px;height:300px;float: left;"></div>
                </div>
            </div>
        </el-row>
    </div>
</div>

<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        components: {
        
        },
        data: {
            minDate: null,
            maxDate: null,
            pickerOptions: {
                onPick: (date) => {
                    this.maxDate = date.maxDate;
                    this.minDate = date.minDate;
                },
                disabledDate: (time) => {
                    if (null != this.minDate) {
                        let min = new Date(this.minDate.getTime());
                        let max = new Date(this.minDate.getTime());
                        min.setFullYear(this.minDate.getFullYear() - 1);
                        max.setFullYear(this.minDate.getFullYear() + 1);
                        return time.getTime() > max || time.getTime() < min;
                    }
                    return false;
                },
                shortcuts: [{
                    text: '昨日',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24)
                        end.setTime(end.getTime() - 3600 * 1000 * 24)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '本周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        let week = start.getDay() || 7;
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '上周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        let week = start.getDay() || 7;
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
                        end.setTime(start.getTime() - 3600 * 1000 * 24);
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '上月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setMonth(start.getMonth() - 1)
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1))
                        let d = new Date(start.getFullYear(), (start.getMonth() + 1), 0);
                        let day = d.getDate();
                        end.setTime(start.getTime() + 3600 * 1000 * 24 * (day - 1))
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '本月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setDate(1);
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '今年',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        //start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12)
                        start.setMonth(0);
                        start.setDate(1);
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            formInline: {
                time: [],
                useSituation: '',
                system: ''
            },
            useSituations: [
                {name:"已推送",code:"pushed"},
                {name:"已采纳",code:"adopted"},
                {name:"未采纳",code:"unAdopted"}
            ],
            systems: [
                {name:"知识体系1",code:"first"},
                {name:"知识体系2",code:"second"},
                {name:"知识体系3",code:"third"}
            ],
            reloadComponent: false
        },
        // 从数据库拿数据动态显示
        mounted() {
        	//调用获取echarts的option的方法
            this.getPushedPie();
            this.getAdoptedPie();
        },
        methods: {
            getPushedPie() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('pushed'));

                var option = {// 指定图表的配置项和数据
                    title: {
                        text: '已推送占比',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已推送','未推送']
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '知识使用占比',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 15, name: '已推送'},
                                {value: 11, name: '未推送'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            getAdoptedPie() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('adopted'));
                var option = {// 指定图表的配置项和数据
                    title: {
                        text: '已采纳占比',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已采纳','未采纳']
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '知识使用占比',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 15, name: '已采纳'},
                                {value: 11, name: '未采纳'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
          }
	}
});

<style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard-editor-container {

        background-color: rgb(240, 242, 245);

        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }
    }
</style>
</body>
</html>
xy405580364
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中使用vue和echarts
02-20
html中使用vue和echarts
echarts在vue中的基本使用流程
m0_62823653的博客
08-23 395
在打开页面之后更新echarts的数据想要页面跟着渲染需要调用配置项。使用流程:echarts在vue中的使用流程。在我的第二部分使用方法中就是说必须调用此函数。第二部分知识小点:适配器。
Vue项目中使用echarts教程
qq_20236937的博客
05-08 2831
/该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容。//此处的意思就是，对 demo 元素 进行图表初始化的相关操作。//使用echarts局部引入的方式（我这边的版本是5版本）//2. 基于准备好的dom，初始化echarts实例。//不加的话,当浏览器窗口缩小的时候,样式会出现问题。//import引入的组件需要注入到对象中才能使用。//4.使用刚指定的配置项和数据显示图表。//3. 指定图表的配置项和数据。//初始化echarts实例。// 调用setOption。
html中使用vue+echarts,即开即用
qq_40765784的博客
04-07 1705
vue+echarts使用
html和vue的echarts使用步骤（大白话）
m0_69502730的博客
11-03 717
html和vue的echarts使用步骤（大白话）
怎么在html里面引入echarts,echarts的使用方法
weixin_34461414的博客
06-30 5299
Echarts官网1.单页面中使用1. 先引入Echarts.js文件2. 或者引用线上地址复制代码复制代码3. 设置一个容器(必须有宽度和高度)复制代码复制代码4. 获取盒子元素操作let box = echarts.init(document.getElementById("box"))复制代码复制代码5. 在Echarts官网上进行引入所需的数据option = {title: {te...
使用Vue开发动态刷新Echarts组件的教程详解
08-27
在 App.vue 文件中，import Chart 组件，并在模板中使用它。将 Chart 组件的 id 设置为 "test"，并将其渲染到页面上。 五、第一次迭代 在第一次迭代中，我们已经实现了一个基本的 Echarts 组件，但是仍然存在一些...
解决vue一个页面中复用同一个echarts组件的问题
10-15
主要介绍了解决vue一个页面中复用同一个echarts组件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 项目引入echarts 添加点击事件操作
10-14
这样，我们就可以在Vue组件中通过`this.$echarts`访问ECharts实例。例如，在某个Vue文件中，我们可以初始化一个ECharts实例并添加点击事件监听器： ```javascript mounted() { this.calendarChart = this.$echarts...
vue-echarts组件
04-21
然后，在Vue组件中引入并使用它： ```javascript <v-chart :options="chartOptions"></v-chart> import ECharts from 'vue-echarts' import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' ...
ECharts图表 HTML页面使用&vue组件使用
weixin_43297321的博客
08-15 1893
ECharts ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网介绍echarts：https://echarts.apache.org/zh/feature.html HTML页面使用 官方实例展示：https://echarts.apache.org
2021-06-10 Vue踩坑日记——ECharts在html和vue的不同引用
weixin_45561430的博客
06-10 214
一、引入方式 html：<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> vue：
html/vue调用echarts
Ygaidi的博客
11-09 213
【代码】html/vue调用echarts。
Vue项目中引入html页面（vue.js中引入echarts数据大屏html [静态非数据传递!] ）
Start_Simple的博客
04-01 1765
vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来。这里是静态展示 动态数据效果还需html页面加一个监听message的事件这篇文件不赘述。方法 不同于vue的 components: { } 命名方式。再修改宽高即可满足首页(vue页)呈现引入的html。在项目原有vue（例如首页）基础上引入html页面。index为html的首页。vue调用vue页面方式。
【Echarts】在html中引入echarts详细步骤教程【源码】
热门推荐
m0_67986791的博客
03-07 1万+
【代码】【Echarts】在html中引入echarts详细步骤教程【源码】
ECharts——绘制柱状图
娓娓道来
08-28 1174
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></sc...
Vue引入Echarts图表的使用
xiaowude_boke的博客
10-21 221
Vue中使用Echarts图表
通过npm引入的echart目录_vue项目中引用echarts的几种方式
weixin_39662955的博客
12-19 1642
首先我们初始化一个vue项目，执行vue init webpack echart,接着我们进入初始化的项目下。安装echarts，npm install echarts -S //或cnpm install echarts -S安装完成之后，我们就可以开始引入我们需要的echarts了，接下来介绍几种使用echarts的方式。全局引用：首先在main.js中引入echarts，将其绑定到vue原型...
echarts如何嵌入vue中使用
m0_50013284的博客
07-28 1772
echarts如何嵌入vue中使用
vue在组件里面引入echarts
最新发布
05-17
在 Vue 中引入 Echarts，可以通过将 Echarts 封装成组件，然后在需要使用的组件中引用该组件来实现。具体的实现步骤如下： 1. 安装 echarts，可以通过 npm 或者 yarn 安装 ``` npm install echarts --save ``` 2. 创建 Echarts 组件 ``` <template> <div ref="echartsDom" :style="{ width: '100%', height: '100%' }"></div> </template> <script> import echarts from 'echarts' export default { name: 'Echarts', props: { option: { type: Object, required: true } }, mounted () { this.renderChart() }, methods: { renderChart () { const chart = echarts.init(this.$refs.echartsDom) chart.setOption(this.option) window.addEventListener('resize', () => { chart.resize() }) } } } </script> <style scoped> </style> ``` 3. 在需要使用的组件中引用该组件，并传递 option 参数 ``` <template> <div> <Echarts :option="option"></Echarts> </div> </template> <script> import Echarts from './Echarts.vue' export default { name: 'MyComponent', components: { Echarts }, data () { return { option: {...} } } } </script> <style scoped> </style> ``` 以上就是在 Vue 组件中引用 Echarts 的一种方式，具体实现还可以根据自己的需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值