什么是ECharts验残？
ECharts是百度團(tuán)隊(duì)開發(fā)的一個(gè)可以個(gè)性定制的數(shù)據(jù)可視化的圖標(biāo)庫捞附。數(shù)據(jù)可視化是指將數(shù)據(jù)以圖形的形式進(jìn)行顯示。比如
<!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>分別將男女的個(gè)數(shù)用圖形顯示</p>
<div class="man">200個(gè)男性</div>
<div class="wom">250 個(gè)女性</div>
</body>
</html>
作用：將數(shù)據(jù)可視化您没，讓數(shù)據(jù)更加直觀鸟召。
使用
1、引入ECharts
<script src="AMD"></script> //引用AMD
<script src="local"></script> //也可以下載ECharts到本地引入
2氨鹏、創(chuàng)建一個(gè)存放ECharts的圖形容器（比如div）
<div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue; padding: 20px;"></div>
3欧募、初始化一個(gè)ECharts的實(shí)例
js
var demo = ECharts.init(document.querySelectior('div')) //將ECharts的圖表放到div容器中顯示。
4仆抵、圖表的數(shù)據(jù)和配置項(xiàng)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
5跟继、進(jìn)行顯示圖表
demo.setOption(option); //將數(shù)據(jù)在圖表中進(jìn)行顯示
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>
更詳細(xì)看官網(wǎng)ECharts
vue使用ECharts
安裝
1、通過npm安裝命令
$ npm install echarts --save-dev
成功就會顯示 + echarts@4.1.0（數(shù)字是版本號）
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創(chuàng)建項(xiàng)目更改build/webpack.base.conf.js文件部分內(nèi)容
{
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: '極坐標(biāo)雙數(shù)值軸'
},
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的項(xiàng)目中配置了上面所說的設(shè)置就可以在vue項(xiàng)目中顯示echarts了剩盒，但是當(dāng)插入到echarts中的餅圖時(shí)谷婆，你的項(xiàng)目會報(bào)錯(cuò)說請預(yù)先設(shè)置pie，怎樣解決這個(gè)問題呢辽聊？
在原先配置好的main.js中引入echarts
import echarts from 'echarts' //添加
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
