vue如何使用Echarts图表

简介: 使用这种方式得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大。也可以只按需引入需要的模块。

在vue-cli项目中添加webpack配置,本文引入的最新版本。在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。


使用npm添加package.json文件中的配置并下载相关npm包依赖


npm install echarts --save


然后在项目文件的入口js文件main.js中添加


import echarts from "echarts"


在需要添加图标的组件中创建依赖的实例


var echarts = require('echarts');


使用这种方式得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大。也可以只按需引入需要的模块。例如


// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');


各种资源的列表详情请查阅官网的github仓库


https://github.com/ecomfe/echarts/blob/master/index.js


在模板中创建所需的dom


<!-- ECharts图表测试 -->
 <div id="charts" style="width:'100%',height:'3.54rem'">
  <div id="main" :style="{width:'100%',height:'3.54rem'}"></div>
 </div>


写入js:


export default {
 name: 'Bank',
 data () {
 return {
 }
 },
 components: {
 },
 computed: {
 },
 methods: {
 },
 mounted() {
 /*ECharts图表*/
 var myChart = echarts.init(document.getElementById('main'));
 下方代码防止越界,重汇canvas处,即为可以解决掉屏幕缩小,图表不会随之适应的缩小的方法,原理为当浏  览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas
 //防止越界,重绘canvas
 window.onresize = myChart.resize;
 myChart.setOption({
  series : [
   {
    name: '访问来源',
    type: 'pie',
    radius: '55%',
    itemStyle: {
    normal: {
      // 阴影的大小
      shadowBlur: 200,
      // 阴影水平方向上的偏移
      shadowOffsetX: 0,
      // 阴影垂直方向上的偏移
      shadowOffsetY: 0,
      // 阴影颜色
      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
    },
    data:[
     {value:400, name:'搜索引擎'},
     {value:335, name:'直接访问'},
     {value:310, name:'邮件营销'},
     {value:274, name:'联盟广告'},
     {value:235, name:'视频广告'}
    ]
   }
  ]
 })
 }
}


eCharts中的事件:


ECharts 支持常规的鼠标事件类型,包括


'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。


基于准备好的dom,初始化ECharts实例


var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
 xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {},
 series: [{
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
 }]
};


使用刚指定的配置项和数据显示图表。


myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
 window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,如下格式:
{
 // 当前点击的图形元素所属的组件名称,
 // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
 componentType: string,
 // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
 seriesType: string,
 // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
 seriesIndex: number,
 // 系列名称。当 componentType 为 'series' 时有意义。
 seriesName: string,
 // 数据名,类目名
 name: string,
 // 数据在传入的 data 数组中的 index
 dataIndex: number,
 // 传入的原始数据项
 data: Object,
 // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
 // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
 // 其他大部分图表中只有一种 data,dataType 无意义。
 dataType: string,
 // 传入的数据值
 value: number|Array
 // 数据图形的颜色。当 componentType 为 'series' 时有意义。
 color: string
}


如何区分鼠标点击到了哪里:


myChart.on('click', function (params) {
 if (params.componentType === 'markPoint') {
  // 点击到了 markPoint 上
  if (params.seriesIndex === 5) {
   // 点击到了 index 为 5 的 series 的 markPoint 上。
  }
 }
 else if (params.componentType === 'series') {
  if (params.seriesType === 'graph') {
   if (params.dataType === 'edge') {
    // 点击到了 graph 的 edge(边)上。
   }
   else {
    // 点击到了 graph 的 node(节点)上。
   }
  }
 }
});


你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表,显示浮层等等,如下示例代码:


myChart.on('click', function (parmas) {
 $.get('detail?q=' + params.name, function (detail) {
  myChart.setOption({
   series: [{
    name: 'pie',
    // 通过饼图表现单个柱子中的数据分布
    data: [detail.data]
   }]
  });
 });
});


相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
186 1
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
66 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
320 0
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
489 0
|
2月前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
122 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
505 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
68 1
|
4月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图