Vue 使用图表插件 -- Echarts

目前常用的图表插件有：
charts
Echarts
highcharts
d3.js
这次根据Vue 项目中 Echarts 的应用记一笔。

安装插件

npm install echarts -S

使用npm 安装 Echarts，安装成功后，可在项目package.json 文件中查看到

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

import echarts from 'echarts'

模板中创建所需的Demo

<!-- ECharts图表测试 -->
<template><!-- 图表 --><div class="vol-data"><div class="charts" style="width:'100%',height:'6.54rem'"><div class="charts-title">24小时内最高：99.99</div><div id="myChart" :style="{width:'100%',height:'300px'}"></div></div></div>
<template>

<script>
import echarts from 'echarts'
export default {name: 'Bank',data () {return {}},mounted () {/*ECharts图表*/var myChart = echarts.init(document.getElementById('myChart'));myChart.setOption({xAxis: {type: 'category',data: ['0', '6H', '9H', '12H', '15H', '18H', '24H']},yAxis: {type: 'value'},series: [{data: [1, 3, 4, 7, 4, 6, 9],type: 'line'}]})},methods:{}
}
</script>

eCharts中的事件

ECharts 支持常规的鼠标事件类型，包括 ‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’ 事件。

// 基于准备好的demo，初始化ECharts实例
var myChart = echarts.init(document.getElementById(‘main’));

指定图表的配置项和数据

var option = {xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]
};

Vue 使用图表插件 -- Echarts相关推荐

canvas js 绘图插件_[开盖即食]小程序图表插件eCharts实战
H5时代用来做图表的插件有很多比如:ECharts.Bizcharts.JSCharts等,而这次的小程序本人选用了 ECharts 作为图表组件. 1.选择原因主要有3点: 官方某度在持续维护这个插 ...
js图表插件Echarts
在制作网页的时候,我们有时会需要制作图表,自己画一个很麻烦,这个时候就可以用到echarts. echarts 1.下载js文件使用的时候需要下载echarts的js文件(官网链接),可以去官网下载 ...
React中使用图表插件(ECharts)
在React项目中是如何使用ECharts的呢简单粗暴不多bb 直接上代码新手上路不喜勿喷 ECharts文档:https://www.echartsjs.com/zh/option.html# ...
【ECharts】百度图表插件ECharts使用
百度ECharts报表呈现组件,挺不错的一个组件官方网址:http://echarts.baidu.com/ 下载 ECharts http://echarts.baidu.com/download ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...
canvas js 绘图插件_快速入门前端图表插件Echart
在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一点的图表怎么办呢? 而且黑马的课程大纲已经把canvas课程删掉了,既然canvas有用,为什么要 ...
vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...
ECharts 图表插件使用整理（图表配置实现）
ECharts 图表插件使用整理说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...

Vue 使用图表插件 -- Echarts

安装插件

模板中创建所需的Demo

eCharts中的事件

Vue 使用图表插件 -- Echarts相关推荐

最新文章

热门文章