npm 安装 ECharts
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save引入 ECharts
通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。
var echarts = require('echarts'); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });按需引入 ECharts 图表和组件
默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。
例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js
对于另一个流行的模块打包工具 browserify 也是同样的用法，这里就不赘述了。
另外这些都配置好了，可是有一个legend的标签总是显示不出来，多次检查 也不知道问题出在哪个地方，也对比了官网的例子，最后没有引入legend组建，
加上这个就可以了 require('echarts/lib/component/legend');
vue中
<
template
>
<
div
class=
"dashboard-container"
>
<
div
class=
"head"
>
<
div
class=
"goods"
>
<
div
class=
"title"
>
商品总数
</
div
>
<
div
class=
"middle"
>
<
div
class=
"left"
>
<
p
>1000
</
p
>
<
p
>在售商品数
</
p
>
</
div
>
<
div
class=
"right"
>
<
p
>1000
</
p
>
<
p
>下架商品数
</
p
>
</
div
>
</
div
>
<
div
class=
"bottom"
>
在售商品数1000
</
div
>
<
div
class=
"yuan"
>
<
div
class=
"out"
>1000
</
div
>
</
div
>
</
div
>
<
div
class=
"order"
>
<
div
class=
"title"
>
订单总数
</
div
>
<
div
class=
"middle"
>
<
div
class=
"left"
>
<
p
>100
</
p
>
<
p
>昨日新增订单数
</
p
>
</
div
>
<
div
class=
"right"
>
<
p
>20
</
p
>
<
p
>昨日退单数
</
p
>
</
div
>
</
div
>
<
div
class=
"yuan"
>
<
div
class=
"out"
>1000
</
div
>
</
div
>
</
div
>
<
div
class=
"member"
>
<
div
class=
"title"
>
商品总数
</
div
>
<
div
class=
"bottom"
>
<
p
class=
"first"
></
p
>
<
p
>20
</
p
>
<
p
>昨日新增会员
</
p
>
</
div
>
<
div
class=
"yuan"
>
<
div
class=
"out"
>1000
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class=
"chart"
>
<
div
id=
"lineChart"
></
div
>
<
div
class=
"btn"
>
<!-- <button class="btn1">近一周</button>
<button class="btn1">近一月</button>
<button class="btn1">近一季度</button> -->
<
el-button-group
>
<
el-button
type=
"primary"
class=
"btn1"
>近一周
</
el-button
>
<
el-button
class=
"btn1"
>近一月
</
el-button
>
<
el-button
class=
"btn1"
>近一季度
</
el-button
>
</
el-button-group
>
</
div
>
</
div
>
<
div
class=
"bottom"
>
<
h3
class=
"title"
>待办事项
</
h3
>
<
div
class=
"bottom-top"
>
<
div
class=
"product"
>商品
</
div
>
<
div
class=
"right"
>
<
img
:src="
page3"
alt=
""
/>
<
div
>
<
p
class=
"num"
>1
</
p
>
<
p
class=
"dis"
>商品缺货
</
p
>
</
div
>
</
div
>
<
div
class=
"right"
>
<
img
:src="
page17"
alt=
""
/>
<
div
>
<
p
class=
"num"
>2
</
p
>
<
p
class=
"dis"
>库存预警
</
p
>
</
div
>
</
div
>
</
div
>
<
div
class=
"bottom-top"
>
<
div
class=
"product"
>订单
</
div
>
<
div
class=
"right"
>
<
img
:src="
page10"
alt=
""
/>
<
div
>
<
p
class=
"num"
>1
</
p
>
<
p
class=
"dis"
>代发货订单
</
p
>
</
div
>
</
div
>
<
div
class=
"right"
>
<
img
:src="
page12"
alt=
""
/>
<
div
>
<
p
class=
"num"
>3
</
p
>
<
p
class=
"dis"
>投诉订单
</
p
>
</
div
>
</
div
>
<
div
class=
"right"
>
<
img
:src="
page13"
alt=
""
/>
<
div
>
<
p
class=
"num"
>4
</
p
>
<
p
class=
"dis"
>售后订单
</
p
>
</
div
>
</
div
>
<
div
class=
"right"
>
<
img
:src="
page17"
alt=
""
/>
<
div
>
<
p
class=
"num"
>2
</
p
>
<
p
class=
"dis"
>评价订单
</
p
>
</
div
>
</
div
>
</
div
>
<
div
class=
"bottom-top bottom-last"
>
<
div
class=
"product product-bottom"
>结算对账
</
div
>
<
div
class=
"right"
>
<
img
:src="
page10"
alt=
""
/>
<
div
>
<
p
class=
"num"
>2
</
p
>
<
p
class=
"dis"
>用户体现
</
p
>
</
div
>
</
div
>
<
div
class=
"right"
>
<
img
:src="
page18"
alt=
""
/>
<
div
>
<
p
class=
"num"
>2
</
p
>
<
p
class=
"dis"
>账单审核
</
p
>
</
div
>
</
div
>
<
div
class=
"right"
>
<
img
:src="
page19"
alt=
""
/>
<
div
>
<
p
class=
"num"
>2
</
p
>
<
p
class=
"dis"
>账单支付
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
template
>
<
script
>
var
echarts =
require(
'echarts');
import
page3
from
'@/assets/homePage/home1.png'
import
page5
from
'@/assets/homePage/home2.png'
import
page10
from
'@/assets/homePage/home3.png'
import
page12
from
'@/assets/homePage/home4.png'
import
page13
from
'@/assets/homePage/home5.png'
import
page17
from
'@/assets/homePage/home6.png'
import
page18
from
'@/assets/homePage/home7.png'
import
page19
from
'@/assets/homePage/home8.png'
export
default {
name:
'dashboard',
data(){
return {
page3,
page5,
page10,
page12,
page13,
page17,
page18,
page19
}
},
computed: {
},
mounted () {
var
lineChart =
document.
getElementById(
'lineChart');
let
myChart =
echarts.
init(
lineChart);
console.
log(
lineChart);
var
option = {
title:{
text:
'订单销售统计分析',
textStyle:{
color:
'#333',
fontSize:
16,
lineHeight:
88,
fontWeight:
700
}
},
tooltip: {
trigger:
'axis'
},
legend: {
data:[
'销售额',
'订单额']
},
xAxis: {
type:
'category',
boundaryGap:
false,
data: [
'3-22',
'3-23',
'3-24',
'3-25',
'3-26',
'3-27',
'3-28']
},
yAxis: {
type:
'value'
},
grid: {
left:
'3%',
right:
'40%',
bottom:
'3%',
containLabel:
true
},
series:[
{
name:
'金额',
type:
'line',
stack:
'总量',
data:[
120,
132,
101,
134,
90,
230,
210]
}
]
}
myChart.
setOption(
option);
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.dashboard-container{
margin-left:
0;
margin-top:
20px;
background:
#f5f5f5;}
.head{
display:
flex;
.goods,
.order,
.member{
position:
relative;
width:
344px;
height:
270px;
border-radius:
10px;
margin-left:
20px;
.title{
background:
#00cccc;
height:
82px;
font:
700
18px/
48px
'';
color:
#fff;
text-indent:
22px;
margin-bottom:
3px;}
.middle{
display:
flex;
height:
100px;
text-align:
center;
background:
#edf6ff;
border-bottom:
1px
solid
#e6e9eb;
font-size:
16px;
color:
#00cccc;
.left{
width:
187px;
border-right:
1px
solid
#e6e9eb;}
.right{
width:
187px;}
}
.bottom{
height:
86px;
background:
#edf6ff;
font:
16px/
86px
'';
color:
#00cccc;
text-align:
center;}
.yuan{
position:
absolute;
width:
97px;
height:
97px;
border-radius:
50%;
background:
#fff;
left:
0;
right:
0;
margin:
auto;
top:
36px;
.out{
position:
absolute;
width:
92px;
height:
92px;
border-radius:
50%;
background:
#00cccc;
text-align:
center;
font:
700
18px/
92px
'';
color:
#fff;
left:
0;
right:
0;
margin:
auto;
top:
0;
bottom:
0;}
}
}
.order{
.title{
background:
#57aaff;}
.middle{
height:
186px;
border-bottom:
0;
background:
#e5fbf9;
.left{
padding-top:
70px;}
.right{
padding-top:
70px;}
}
}
.member{
.title{
background:
#ff9966;}
.bottom{
height:
186px;
text-align:
center;
margin-top:
-13px;
p{
font:
16px/
28px
'';}
.first{
height:
66px;}
}
}
}
#lineChart{
height:
400px;
margin-left:
20px;
margin-top:
20px;
padding:
36px
0
76px
20px;
border:
1px
solid
#ededed;
background:
#fff;}
.bottom{
padding-left:
20px;
padding-bottom:
60px;
background:
#fff;
.title{
line-height:
46px;
font-size:
16px;
color:
#333;}
.bottom-top{
display:
flex;
height:
98px;
border-top:
1px
solid
#f5f5f5;
.product{
background:
#57aaff;
border-radius:
4px
0
0
4px;
width:
40px;
font-size:
16px;
color:
#fff;
font-weight:
700;
line-height:
20px;
padding-left:
14px;
padding-top:
32px;
margin-top:
-1px;}
.right{
display:
flex;
padding:
28px
0
0
56px;}
img{
display:
block;
width:
40px;
height:
46px;
margin-right:
18px;}
p{
padding:
0;
margin:
0;}
p.num{
font-size:
20px;
color:
#6e6e6e;}
p.dis{
font:
14px/
34px
'';
color:
#666666;}
.product-bottom{
padding-top:
5px;}
}
.bottom-last{
border-bottom:
1px
solid
#f5f5f5;}
}
.chart{
position:
relative;}
.btn{
position:
absolute;
top:
320px;
right:
50px;
width:
188px;
height:
24px;
.btn1{
margin:
-4px;
width:
62px;
height:
24px;
font:
12px/
24px
'';
padding:
0;
cursor:
pointer;
}
}
</
style
>