Vue中使⽤echarts案例
需要注意的点：
1. 本案例采⽤按需引⼊；
2. echarts所挂载的DOM必须设置宽⾼；
3. 本案例包含常⽤的折线图、柱状图（横向、竖向）、饼图、动态创建多个图表；
4. echarts安装 npm install echarts
5. echarts
6. echarts
7. echarts，有很多好看的例⼦
8. 官⽅案例中选中完整代码-按需引⼊，即可获得按需引⼊的模块
<template>
<div>
<!--折线图-->
<div ref="lineRef" id="line"class="whClass"></div>
<!--柱状图-->
<div ref="barRef" id="bar"class="whClass"></div>
<!--横向柱状图-->
<div ref="xbarRef" id="xbar"class="whClass"></div>
<!--饼图-->
<div ref="pieRef" id="pie"class="whClass"></div>
<!--动态创建多个图表-->
<div
htmlborder
v-for="item in pieList"
v-for="item in pieList"
:key="item.id"
:ref="`id${item.id}Ref`"
:id="`id${item.id}ID`"
class="dynamicClass"
></div>
</div>
</template>
<script>
/
/ 对于echarts按需引⼊
// 引⼊ echarts 核⼼模块，核⼼模块提供了 echarts 使⽤必须要的接⼝。import*as echarts from"echarts/core";
import{
GridComponent,
TooltipComponent,
LegendComponent,
TitleComponent,
}from"echarts/components";
import{ LineChart, BarChart, PieChart }from"echarts/charts"; import{ CanvasRenderer }from"echarts/renderers";
echarts.use([
GridComponent,
LineChart,
CanvasRenderer,
TooltipComponent,
BarChart,
LegendComponent,
PieChart,
TitleComponent,
]);
export default{
name:"echarts",
created(){},
mounted(){
this.init();
},
data(){
return{
// 折线图
lineOption:{
xAxis:{
type:"category",
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], },
yAxis:{
type:"value",
},
grid:{
top:30,
right:10,
bottom:20,
left:30,
},
series:[
{
data:[11,222,45,1111,129,133,132],
type:"line",
smooth:true,
},
],
},
// 柱状图
// 柱状图
barOption:{
title:{
text:"标题",
},
tooltip:{
trigger:"axis",
axisPointer:{
// 坐标轴指⽰器，坐标轴触发有效
type:"shadow",// 默认为直线，可选为：'line' | 'shadow' },
},
grid:{
left:"3%",
right:"6%",
bottom:"3%",
containLabel:true,
},
xAxis:[
{
type:"category",
data:["周⼀","周⼆","周三","周四","周五","周六","周⽇"], },
],
yAxis:[
{
type:"value",
},
]
,
series:[
{
name:"全部",
type:"bar",
// barWidth: '60%',
stack:"⼴告",
data:[10,52,200,334,390,330,220],
},
{
name:"不合格",
type:"bar",
stack:"⼴告",
data:[120,132,101,134,90,230,210],
},
],
},
// 横向柱状图
xbarOption:{
tooltip:{
trigger:"axis",
axisPointer:{
/
/ Use axis to trigger tooltip
type:"shadow",// 'shadow' as default; can also be 'line' or 'shadow' },
},
grid:{
left:"3%",
right:"4%",
bottom:"3%",
containLabel:true,
},
xAxis:{
type:"value",
show:false,
},
yAxis:[
{
{
type:"category",
splitLine:{
show:false,
},
axisTick:{
show:false,
},
axisLine:{
show:false,
},
data:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], },
],
series:[
{
name:"one",
type:"bar",
stack:"total",
barWidth:20,
data:[320,302,301,334,390,330,320],
itemStyle:{
normal:{
barBorderRadius:[0,30,30,0],
},
},
},
{
name:"two",
type:"bar",
barGap:"-100%",// 设置外框粗细
data:[3201,3021,3011,3341,3901,3301,3201],            barWidth:20,
itemStyle:{
normal:{
barBorderRadius:[0,30,30,0],
},
},
z:0,
},
],
},
/
/ 饼图
pieOption:{
tooltip:{
trigger:"item",
},
grid:{
left:"3%",
right:"4%",
bottom:"3%",
containLabel:true,
},
legend:{
type:"scroll",
orient:"vertical",
right:10,
top:20,
bottom:20,
icon:"circle",
textStyle:{
color:"#000",
rich:{
name:{
verticalAlign:"right",
align:"left",
align:"left",
width:35,
fontSize:12,
},
value:{
align:"left",
width:40,
fontSize:12,
},
count:{
align:"left",
width:50,
fontSize:12,
},
upRate:{
align:"left",
fontSize:12,
color:"#00cf90",
},
downRate:{
align:"left",
fontSize:12,
color:"#ff5722",
},
},
},
},
series:[
{
name:"标题",
type:"pie",
radius:["70%","50%"],            center:["35%","50%"],            avoidLabelOverlap:false,            itemStyle:{
borderRadius:10,
borderColor:"#fff",
borderWidth:2,
},
label:{
show:false,
position:"center",
},
emphasis:{
label:{
show:true,
fontSize:"40",
fontWeight:"bold",
},
},
labelLine:{
show:false,
},
data:[
{
name:"数据1",
value:36,
},
{
name:"数据2",
value:20,
},
{
name:"数据3",
value:16,
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。