vue项目如何结合百度echarts生成图表

vue项目开发中经常会用到百度echarts，那么我们需要安装哪些脚手架呢？下面web建站小编给大家简单介绍一下！

安装脚手架

npm install echarts --save

全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

创建图表

<template>
 <div>
   <div class="charts">
    <div id="bar" style="height: 350px;"></div>
   </div>
 </div>
</template>
<script>
// 引入基本模板,按需加载
let echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
 mounted(){
   this.drawBar();
 },
 methods:{
   drawBar(){
    let bar = echarts.init(document.getElementById('bar'));
    // 绘制图表
    bar.setOption({
      tooltip: {
       trigger: 'item',
       formatter: '{a} <br/>{b} : {c}'
      },
      legend: {
       left: 'center',
       data: ['本年', '上年'],
       bottom:0
      },
      xAxis: {
       type: 'category',
       name: 'x',
       splitLine: {show: false},
       data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      grid: {
       left: '1%',
       right: '2%',
       bottom: '8%',
       containLabel: true
      },
      yAxis: {
       type: 'category',
       name: 'y',
       splitLine: {show: true},
       data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
      },
      series: [
       {
       name: '本年',
       type: 'line',
       data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
       },
       {
       name: '上年',
       type: 'line',
       data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
       },
      ]
    })
   },
 }
}
</script>

vue如何做一个柱形图

vue项目开发如何引入echarts图表

百度echarts做一个雷达图（根据不同分数值显示不同颜色）

利用百度echarts做一个温度计

百度echarts图表如何实现异步数据加载

标签： echarts, 图表

上面是“vue项目如何结合百度echarts生成图表”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2976.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！