echarts|echarts 使用（一） echarts使用（一）

Echart能画非常强大的图表绘制工具，由 Apache 孵化器赞助孵化的项目。

文章图片
折线图

文章图片
饼状图

文章图片
k线图

官方教程，内容非常全面。

创建项目

vue init webpack-simple echarts
npm install
npm run dev

安装eCharts

npm install echarts --save

echarts容器

初始化表格

const echarts = require('echarts'); methods: { getChart() { // 1. 获取表格容器 var myChart = echarts.init(document.getElementById("echartContainer")); // 2. 设置各组件样式 myChart.setOption({ //表头 title: {text: '柱状图表'}, // 工具箱 toolbox: { show: true, feature: { magicType: {show: true, type: ['stack', 'tiled']}, saveAsImage: {show: true} } }, // x轴 xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, // y轴 yAxis: { type: 'value' },// 展示数据 series: [{ name: '成交', type: 'line', smooth: true, data: [10, 12, 21, 54, 260, 830, 710] }, { name: '预购', type: 'line', smooth: true, data: [30, 182, 434, 791, 390, 30, 10] }, { name: '意向', type: 'line', smooth: true, data: [1320, 1132, 601, 234, 120, 90, 20] }]}); }, }, mounted(){ this.getChart() }

效果图

文章图片
折线图动态图表

步骤仍然和创建基本的图表类似
模拟数据用一个定时器动态刷新即可

// 更新数据 updateData(){ for (var i = 0; i < 5; i++) { this.data.shift(); this.data.push(this.randomData()); } this.myChart.setOption({ series: [{ data: this.data }] }); }mounted(){ // 1. 生成图标随机数据 this.initData(); // 2. 创建图表 this.cheateDynamicChart(); // 3. 刷新数据 this.timer = setInterval(this.updateData,1000); }, beforeDestroy() { //4. 记着clear 定时器 clearInterval(this.timer) }

文章图片
动态图表动态图标demo
myChart.setOption() 中的参数是什么意思？
在官网上可以看到所有的参数，这些组件用来配置开各种类型的图，功能非常强大。

title组件设置图标表头信息

名称	类型	备注
id	string	组件 ID 指定则可用于在 option 或者 API 中引用组件
show	boolean	是否显示标题组件
link	string	标题链接
backgroundColor	string, number	标题背景颜色
subtext	string	子标题

series[tpye]组件设置图标样式

名称	类型	备注
type	string	设置图表样式：line：折线图，bar：柱状图，pip：饼图，scatter：散点图，tree：树状图等
name	sting	表识数据：如果是折线图，表示该线条名称
其他参数		不同类型，参数不同根据需要设置