- 获取echarts
- 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
- 在 ECharts 的 GitHub 获取。
- 通过 npm 获取 echarts,本文中采用此方式
npm install echarts
- 引入echarts
在main.js中引入echarts,并挂载到全局
import vue from 'vue'
import echarts from 'echarts'
vue.prototype.$echarts = echarts
- 使用echarts
HTML代码部分:
<template>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div style="width: 600px;height:400px;"
ref="main"></div>
</template>
JS代码部分:
<script >
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(this.$refs.main); // 指定图表的配置项和数据
var option = {
title: {text: 'ECharts表格' },
tooltip: {},
legend: {data:['销量']},
xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20] }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
- 效果
- 常见效果图
柱状图:
折线图:
中国地图:
环状图:
6. 配置教程请参考官网:
https://echarts.apache.org/examples/zh/index.html