ECharts的使用
2018-07-23 本文已影响52人
木利
什么是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
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'
