什么是 ECharts?
ECharts 是百度团队开发的一个可以个性定制的数据可视化的图标库. 数据可视化是指将数据以图形的形式进行显示. 比如
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- .man,
- .wom{
- width: 300px;
- height: 30px;
- color: #fff;
- }
- .man{
- background-color: blue;
- }
- .wom{
- width: 400px;
- background-color: red;
- }
- </style>
- </head>
- <body>
- <p > 分别将男女的个数用图形显示 </p>
- <div class="man">200 个男性 </div>
- <div class="wom">250 个女性 </div>
- </body>
- </html>
作用: 将数据可视化, 让数据更加直观.
使用
1, 引入 ECharts
- <script src="AMD"></script> // 引用 AMD
- <script src="local"></script> // 也可以下载 ECharts 到本地引入
2, 创建一个存放 ECharts 的图形容器 (比如 div)
<div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div>
3, 初始化一个 ECharts 的实例
- js
- var demo = ECharts.init(document.querySelectior('div')) // 将 ECharts 的图表放到 div 容器中显示.
4, 图表的数据和配置项
- var option = {
- title: {
- text: 'ECharts 入门示例'
- },
- tooltip: {},
- legend: {
- data:['销量']
- },
- xAxis: {
- data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
- },
- yAxis: {},
- series: [{
- name: '销量',
- type: 'bar',
- data: [5, 20, 36, 10, 10, 20]
- }]
- };
5, 进行显示图表
demo.setOption(option); // 将数据在图表中进行显示
6, 完整的 demo
<body>
<div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div>
<script src="https://cdn.bootCSS.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
<script>
var
div = document.querySelector(".echarts"),
demoEcharts = echarts.init(div);
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
demoEcharts.setOption(option);
</script>
</body>
更详细看官网 ECharts http://echarts.baidu.com/
vue 使用 ECharts
安装
1, 通过 npm 安装命令
$ npm install echarts --save-dev
成功就会显示 + echarts@4.1.0(数字是版本号)
2, 全局配置 echarts
main.js 文件配置
- import ECharts from "vue-echarts/components/ECharts" // 全局引入 echarts
- import 'echarts/lib/chart/bar' // 引入 bar 工具
- import 'echarts/lib/components/toopic' // 引入提示工具
- Vue.component('echart' , ECharts);// 全局引用 echarts 模板
3, 如果使用了 vue-cli 创建项目更改 build/webpack.base.conf.js 文件部分内容
- {
- test: /\.js$/,
- loader: 'babel-loader',
- - include: [resolve('src'), resolve('test')]
- + include: [
- + resolve('src'),
- + resolve('test'),
- + resolve('node_modules/vue-echarts'),
- + resolve('node_modules/resize-detector')
- + ]
- }
4, 单文件组件配置
- <template>
- <chart :options="polar"></chart>
- </template>
- <style>
- .echarts {
- height: 300px;
- }
- </style>
- <script>
- export default {
- data: function () {
- let data = []
- for (let i = 0; i <= 360; i++) {
- let t = i / 180 * Math.PI
- let r = Math.sin(2 * t) * Math.cos(2 * t)
- data.push([r, i])
- }
- return {
- polar: {
- title: {
- text: '极坐标双数值轴'
- },
- legend: {
- data: ['line']
- },
- polar: {
- center: ['50%', '54%']
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- }
- },
- angleAxis: {
- type: 'value',
- startAngle: 0
- },
- radiusAxis: {
- min: 0
- },
- series: [
- {
- coordinateSystem: 'polar',
- name: 'line',
- type: 'line',
- showSymbol: false,
- data: data
- }
- ],
- animationDuration: 2000
- }
- }
- }
- }
- </script>
在 vue 的项目中配置了上面所说的设置就可以在 vue 项目中显示 echarts 了, 但是当插入到 echarts 中的饼图时, 你的项目会报错说请预先设置 pie, 怎样解决这个问题呢?
在原先配置好的 main.js 中引入 echarts
- import echarts from 'echarts' // 添加
- import 'echarts/lib/chart/bar'
- import 'echarts/lib/component/tooltip'
更详情 vue-echarts-npm https://www.npmjs.com/package/vue-echarts
来源: http://www.qdfuns.com/note/48832/686018abdbaa79636091a9e31740c685.html