相思资源网

详解vue文件中使用echarts.js的两种方式
站长资源 2024/11/7 佚名
23 1538
相思资源网 Design By www.200059.com

最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：用了两种实现方式

准备工作

1、安装echarts依赖

控制台输入：npm install echarts --save

2、全局引入

main.js中引入

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

创建图表

第一种创建方式

在一个.vue文件中引入多张图表

创建WelcomePage.vue

<template>
 <div>
 <h1>第一种在vue中使用echart的方式</h1>

 <div class="charts">
  <div id="barGraph" style="height: 350px;"></div>
 </div>

 <div class="charts">
  <div id="pieGraph" style="height: 350px;"></div>
 </div>

 </div>
</template>

<script>
// 引入基本模板,按需加载
 let echarts = require('echarts/lib/echarts');
 // 引入柱状图
 require('echarts/lib/chart/bar');
 // 引入柱状图
 require('echarts/lib/chart/pie');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');


export default {
 name: "WelcomePage",
 data () {
 return { }
 },
 mounted(){
 this.drawBar();
 this.drawPie();
 },
 methods:{
 drawBar(){
  // 基于dom，初始化echarts实例
  let barGraph = echarts.init(document.getElementById('barGraph'));
  // 绘制图表
  barGraph.setOption({
  title: {
   text: '全年产量趋势图',
   left: 'center'
  },
  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]
   },
  ]
  })
 },
 drawPie(){
  let pieGraph = echarts.init(document.getElementById('pieGraph'));
  pieGraph.setOption({
  title : {
   text: '某站点用户访问来源',
   subtext: '纯属虚构',
   x:'center'
  },
  tooltip : {
   trigger: 'item',
   formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
   orient: 'vertical',
   left: 'left',
   data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  },
  series : [
   {
   name: '访问来源',
   type: 'pie',
   radius : '55%',
   center: ['50%', '60%'],
   data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
   ],
   itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
   }
   }
  ]
  })
 }
 }
}
</script>

实现效果如下图：

详解vue文件中使用echarts.js的两种方式

第二种实现方式（以组件的形式）

创建父组件 father.vue

 <div>
 <h1>{{ msg }}</h1>
 <p>第二种方式：通过组件的方式进行页面渲染</p>
 <div class="container" >
  <bar-graph></bar-graph>
 </div>

 <div class="container">
  <pie-graph></pie-graph>
 </div>

 </div>
<script>
// 引入两个子组件
 import BarGraph from "./bargraph";
 import PieGraph from "./piegraph";
 export default {
 name: "father",
 components:{
  BarGraph,
  PieGraph,
 },
 data(){
  return{
  msg: '我是爸爸，想看我的儿子，眼睛请往下移',
  }
 }
 }
</script>

创建子组件barGraph.vue

 <div>
 <p>{{ msg }}</p>
 <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
 </div>
 </div>
<script>
 let echarts = require('echarts/lib/echarts');
 // 引入柱状图
 require('echarts/lib/chart/bar');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');

 // import echarts from 'echarts'

 export default {
  name: "bargraph",
  // props:['id'], // 第一种接收父亲传过来的值的方式
  props: {
  id: {
   type: String,
   default: 'chart'
  }
  },
  data(){
   return {
   msg: "我是第一个子组件--bar",
   chart: null,
   }
  },
  mounted(){
  this.drawBar();
  },
  methods:{
  drawBar(){
   this.chart = echarts.init(document.getElementById(this.id));
   let colors = ['#5793f3', '#d14a61', '#675bba'];
   this.chart.setOption(
   {
    color: colors,

    tooltip: {
    trigger: 'axis',
    axisPointer: {
     type: 'cross'
    }
    },
    grid: {
    right: '20%'
    },
    toolbox: {
    feature: {
     dataView: {show: true, readOnly: false},
     restore: {show: true},
     saveAsImage: {show: true}
    }
    },
    legend: {
    data:['蒸发量','降水量','平均温度']
    },
    xAxis: [
    {
     type: 'category',
     axisTick: {
     alignWithLabel: true
     },
     data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    }
    ],
    yAxis: [
    {
     type: 'value',
     name: '蒸发量',
     min: 0,
     max: 250,
     position: 'right',
     axisLine: {
     lineStyle: {
      color: colors[0]
     }
     },
     axisLabel: {
     formatter: '{value} ml'
     }
    },
    {
     type: 'value',
     name: '降水量',
     min: 0,
     max: 250,
     position: 'right',
     offset: 80,
     axisLine: {
     lineStyle: {
      color: colors[1]
     }
     },
     axisLabel: {
     formatter: '{value} ml'
     }
    },
    {
     type: 'value',
     name: '温度',
     min: 0,
     max: 25,
     position: 'left',
     axisLine: {
     lineStyle: {
      color: colors[2]
     }
     },
     axisLabel: {
     formatter: '{value} °C'
     }
    }
    ],
    series: [
    {
     name:'蒸发量',
     type:'bar',
     data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
     name:'降水量',
     type:'bar',
     yAxisIndex: 1,
     data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
     name:'平均温度',
     type:'line',
     yAxisIndex: 2,
     data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
    ]
   }
   )
  }
  }
 }
</script>

创建pieGraph.vue

<template>
 <div>
  <p>{{ msg }}</p>

  <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
  </div>
 </div>
</template>
<script>
 import echarts from 'echarts'

 export default {
  name: "piegraph",
  props:{
  id: {
   type: String,
   default: 'pieChart'
  }
  },
  data(){
   return{
   msg: '我是第二个子组件--pie',
   pieChart: null
   }
  },
  mounted(){
   this.drawPie();
  },
  methods: {
  drawPie () {
   this.pieChart = echarts.init(document.getElementById(this.id));
   this.pieChart.setOption(
   {
    title : {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    x:'center'
    },
    tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
    {
     name: '访问来源',
     type: 'pie',
     radius : '55%',
     center: ['50%', '60%'],
     data:[
     {value:335, name:'直接访问'},
     {value:310, name:'邮件营销'},
     {value:234, name:'联盟广告'},
     {value:135, name:'视频广告'},
     {value:1548, name:'搜索引擎'}
     ],
     itemStyle: {
     emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
     }
    }
    ]
   }
   )
  }
  }
 }
</script>

效果实现如下：

详解vue文件中使用echarts.js的两种方式

详解vue文件中使用echarts.js的两种方式

路由文件如下：

import WelcomePage from '@/components/WelcomePage'
import Father from '@/components/father'

import BarGraph from '@/components/bargraph'
import PieGraph from '@/components/piegraph'

export default new Router({
 routes: [
 {
  path: '/',
  name: 'WelcomePage',
  component: WelcomePage
 },
 {
  path: '/father',
  name: 'father',
  component: Father,
  children:[
  {
   path: '/bargraph',
   name: 'bargraph',
   component: BarGraph
  },
  {
   path: '/piegraph',
   name: 'piegraph',
   component: PieGraph
  }
  ]
 },
 ]
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
vue使用echarts.js
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com

评论“详解vue文件中使用echarts.js的两种方式”

暂无详解vue文件中使用echarts.js的两种方式的评论...
www.200059.com 相思资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
相思资源网 Design By www.200059.com