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

川长思鸟来 2023-07-13 03:45 92阅读 0赞

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

  • 得到echarts图

    var myChart = echarts.init(document.getElementById(‘pushed’));

  • 完整代码

    <!DOCTYPE html>














    1. <meta charset="UTF-8">
    2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    3. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    4. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


    1. <div class="dashboard-editor-container">
    2.     <el-row class="box">
    3.         <div class="box-body box-form">
    4.             <el-form :inline="true" :model="formInline" size="mini">
    5.                 <div class="conditions pull-left" style="width: calc(100% - 150px);">
    6.                     <el-form-item label="统计时段">
    7.                         <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">
    8.                         </el-date-picker>
    9.                     </el-form-item>
    10.                     <el-form-item label="知识使用情况">
    11.                         <el-select size="mini" v-model="formInline.useSituation" placeholder="知识使用情况">
    12.                             <template v-for="item in useSituations">
    13.                                 <el-option :label="item.name" :value="item.code"></el-option>
    14.                             </template>
    15.                         </el-select>
    16.                     </el-form-item>
    17.                     <el-form-item label="知识体系">
    18.                         <el-select size="mini" v-model="formInline.system" placeholder="知识体系">
    19.                             <template v-for="item in systems">
    20.                                 <el-option :label="item.name" :value="item.code"></el-option>
    21.                             </template>
    22.                         </el-select>
    23.                     </el-form-item>
    24.                 </div>
    25.                 <div class="action pull-right">
    26.                     <el-form-item>
    27.                         <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>　开始分析</el-button>
    28.                     </el-form-item>
    29.                 </div>
    30.             </el-form>
    31.         </div>
    32.     </el-row>
  1.         <el-row class="box">
  2.             <div class="box-header">
  3.                 <h3 class="box-title">　知识使用占比</h3>
  4.             </div>
  5.             <div class="box-body">
  6.                 <div>
  7.                     <div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div>
  8.                     <div id="adopted" style="width: 630px;height:300px;float: left;"></div>
  9.                 </div>
  10.             </div>
  11.         </el-row>
  12.     </div>
  13. </div>
  15. <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
  16. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  17. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  18. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  20. <script>
  21.     var app = new Vue({
  22.         el: "#app",
  23.         components: {
  25.         },
  26.         data: {
  27.             minDate: null,
  28.             maxDate: null,
  29.             pickerOptions: {
  30.                 onPick: (date) => {
  31.                     this.maxDate = date.maxDate;
  32.                     this.minDate = date.minDate;
  33.                 },
  34.                 disabledDate: (time) => {
  35.                     if (null != this.minDate) {
  36.                         let min = new Date(this.minDate.getTime());
  37.                         let max = new Date(this.minDate.getTime());
  38.                         min.setFullYear(this.minDate.getFullYear() - 1);
  39.                         max.setFullYear(this.minDate.getFullYear() + 1);
  40.                         return time.getTime() > max || time.getTime() < min;
  41.                     }
  42.                     return false;
  43.                 },
  44.                 shortcuts: [{
  45.                     text: '昨日',
  46.                     onClick(picker) {
  47.                         const end = new Date()
  48.                         const start = new Date()
  49.                         start.setTime(start.getTime() - 3600 * 1000 * 24)
  50.                         end.setTime(end.getTime() - 3600 * 1000 * 24)
  51.                         picker.$emit('pick', [start, end])
  52.                     }
  53.                 }, {
  54.                     text: '本周',
  55.                     onClick(picker) {
  56.                         const end = new Date()
  57.                         const start = new Date()
  58.                         let week = start.getDay() || 7;
  59.                         start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
  60.                         picker.$emit('pick', [start, end])
  61.                     }
  62.                 }, {
  63.                     text: '上周',
  64.                     onClick(picker) {
  65.                         const end = new Date()
  66.                         const start = new Date()
  67.                         let week = start.getDay() || 7;
  68.                         start.setTime(start.getTime() - 3600 * 1000 * 24 * (week - 1))
  69.                         end.setTime(start.getTime() - 3600 * 1000 * 24);
  70.                         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  71.                         picker.$emit('pick', [start, end])
  72.                     }
  73.                 }, {
  74.                     text: '上月',
  75.                     onClick(picker) {
  76.                         const end = new Date()
  77.                         const start = new Date()
  78.                         start.setMonth(start.getMonth() - 1)
  79.                         start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1))
  80.                         let d = new Date(start.getFullYear(), (start.getMonth() + 1), 0);
  81.                         let day = d.getDate();
  82.                         end.setTime(start.getTime() + 3600 * 1000 * 24 * (day - 1))
  83.                         picker.$emit('pick', [start, end])
  84.                     }
  85.                 }, {
  86.                     text: '本月',
  87.                     onClick(picker) {
  88.                         const end = new Date()
  89.                         const start = new Date()
  90.                         start.setDate(1);
  91.                         picker.$emit('pick', [start, end])
  92.                     }
  93.                 }, {
  94.                     text: '今年',
  95.                     onClick(picker) {
  96.                         const end = new Date()
  97.                         const start = new Date()
  98.                         //start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12)
  99.                         start.setMonth(0);
  100.                         start.setDate(1);
  101.                         picker.$emit('pick', [start, end])
  102.                     }
  103.                 }]
  104.             },
  105.             formInline: {
  106.                 time: [],
  107.                 useSituation: '',
  108.                 system: ''
  109.             },
  110.             useSituations: [
  111.                 {name:"已推送",code:"pushed"},
  112.                 {name:"已采纳",code:"adopted"},
  113.                 {name:"未采纳",code:"unAdopted"}
  114.             ],
  115.             systems: [
  116.                 {name:"知识体系1",code:"first"},
  117.                 {name:"知识体系2",code:"second"},
  118.                 {name:"知识体系3",code:"third"}
  119.             ],
  120.             reloadComponent: false
  121.         },
  122.         // 从数据库拿数据动态显示
  123.         mounted() {
  124.             //调用获取echarts的option的方法
  125.             this.getPushedPie();
  126.             this.getAdoptedPie();
  127.         },
  128.         methods: {
  129.             getPushedPie() {
  130.                 // 基于准备好的dom，初始化echarts实例
  131.                 var myChart = echarts.init(document.getElementById('pushed'));
  133.                 var option = {// 指定图表的配置项和数据
  134.                     title: {
  135.                         text: '已推送占比',
  136.                         left: 'center'
  137.                     },
  138.                     legend: {
  139.                         orient: 'vertical',
  140.                         left: 'left',
  141.                         data: ['已推送','未推送']
  142.                     },
  143.                     tooltip: {
  144.                         trigger: 'item',
  145.                         formatter: '{a} <br/>{b} : {c} ({d}%)'
  146.                     },
  147.                     series: [
  148.                         {
  149.                             name: '知识使用占比',
  150.                             type: 'pie',
  151.                             radius: '55%',
  152.                             center: ['50%', '60%'],
  153.                             data: [
  154.                                 {value: 15, name: '已推送'},
  155.                                 {value: 11, name: '未推送'}
  156.                             ],
  157.                             emphasis: {
  158.                                 itemStyle: {
  159.                                     shadowBlur: 10,
  160.                                     shadowOffsetX: 0,
  161.                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  162.                                 }
  163.                             }
  164.                         }
  165.                     ]
  166.                 };
  167.                 // 使用刚指定的配置项和数据显示图表。
  168.                 myChart.setOption(option);
  169.             },
  170.             getAdoptedPie() {
  171.                 // 基于准备好的dom，初始化echarts实例
  172.                 var myChart = echarts.init(document.getElementById('adopted'));
  173.                 var option = {// 指定图表的配置项和数据
  174.                     title: {
  175.                         text: '已采纳占比',
  176.                         left: 'center'
  177.                     },
  178.                     legend: {
  179.                         orient: 'vertical',
  180.                         left: 'left',
  181.                         data: ['已采纳','未采纳']
  182.                     },
  183.                     tooltip: {
  184.                         trigger: 'item',
  185.                         formatter: '{a} <br/>{b} : {c} ({d}%)'
  186.                     },
  187.                     series: [
  188.                         {
  189.                             name: '知识使用占比',
  190.                             type: 'pie',
  191.                             radius: '55%',
  192.                             center: ['50%', '60%'],
  193.                             data: [
  194.                                 {value: 15, name: '已采纳'},
  195.                                 {value: 11, name: '未采纳'}
  196.                             ],
  197.                             emphasis: {
  198.                                 itemStyle: {
  199.                                     shadowBlur: 10,
  200.                                     shadowOffsetX: 0,
  201.                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  202.                                 }
  203.                             }
  204.                         }
  205.                     ]
  206.                 };
  208.                 // 使用刚指定的配置项和数据显示图表。
  209.                 myChart.setOption(option);
  210.             }
  211.           }
  212.     }
  213. });
  215. <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>
  216. </body>
  217. </html>

发表评论

表情：
评论列表 （有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读