可视化Echarts 柱状图、饼状图、折线图的设置

柱状图 

饼状图 

折线图 

柱状图 

        基本的柱状图设置

<template>
<div ref="ec" id="ec"></div>
</template><script>
import * as echarts from "echarts"; //引用echartsexport default {mounted(){let mc = echarts.init(this.$refs.ec) //初始化echarts//设置echarts的数据//设置轴数据let xData = ["x1","x2","x3","x4"];//定义数据let yData = [100,120,80,60];//设置echarts配置项let option = {title:{text:"主标题"},xAxis:{//配置x轴的参数data:xData,type:"category" //坐标轴类型 value数据轴 category类目轴},yAxis:{//y轴相关配置},series:[//系列 配置图表的类型{name:"展示",type:"bar", //系列名：当前的系列类别 bar柱状图data:yData //数据}]}//绘制图表mc.setOption(option)}
}
</script><style>
#ec{width: 500px;height: 500px;border: 1px solid red;
}
</style>

        效果： 

        柱状图的更多效果

        标注大值和最小值 

 series:[//系列 配置图表的类型{name:"展示",type:"bar", //系列名：当前的系列类别 bar柱状图data:yData, //数据//设置最大值/最小值markPoint:{data:[//标注的数据数组,每一项都是一个对象{//最大值type:"max",name:"最大值"},{//最小值type:"min",name:"最小值"}]

         标注平均值

 series:[//系列 配置图表的类型{name:"展示",type:"bar", //系列名：当前的系列类别 bar柱状图data:yData, //数据//图表标线markLine:{data:[{//平均值type:"average",name:"平均值"}]}}]

        水平柱状图设置 （将x轴的配置放在y轴配置中）

<template>
<div ref="ec" id="ec"></div>
</template><script>
import * as echarts from "echarts"; //引用echartsexport default {mounted(){let mc = echarts.init(this.$refs.ec) //初始化echarts//设置echarts的数据//设置轴数据let xData = ["x1","x2","x3","x4"];//定义数据let yData = [100,120,80,60];//设置echarts配置项let option = {title:{text:"主标题"},xAxis:{//配置x轴的参数type:"value"},yAxis:{//y轴相关配置data:xData,type:"category" //坐标轴类型 value数据轴 category类目轴},series:[//系列 配置图表的类型{name:"展示",type:"bar", //系列名：当前的系列类别 bar柱状图data:yData, //数据barWidth:20,//设置每个数据柱形的宽度//color:"pink", //设置每个数据柱形的颜色//单独数据柱形的样式设置itemStyle:{normal:{color:function(p){//创建一个数组let cc = [ //里面装颜色"#c26541","#52f541","#a26641","#d26541"]//添加return cc[p.dataIndex]}}}}]}//绘制图表mc.setOption(option)}
}
</script><style>
#ec{width: 500px;height: 500px;border: 1px solid red;
}
</style>

        效果： 

饼状图 

        基本的柱状图设置

<template>
<div ref="ec" id="sec"></div>
</template><script>
import * as echarts from "echarts" //引用
export default {mounted(){let mc = echarts.init(this.$refs.ec) //初始化//设置数据let data = [{value:67,name:"植物"},{value:101,name:"动物"},{value:150,name:"细菌"},{value:170,name:"真菌"}]//设置配置项let option = {title:{text:"饼状图",x:"center"},legend:{//图例left:"left",//设置位置//设置图例的布局朝向orient:"verical" //纵向：verical},series:[//分类{name:"销量统计",type:"pie", //饼状图：piedata //放入数据}]}//绘图mc.setOption(option)}
}
</script><style>
#sec{width: 600x;height: 500px;border: 1px solid royalblue;
}
</style>

        饼状图的更多样式 

        设置内外半径 

series:[//分类{name:"销量统计",type:"pie", //饼状图：piedata, //放入数据radius:["40%","70%"] //设置饼图的半径 参数：radius:["内半径","外半径"]}]

        环形图标签设置 

series:[//分类{name:"销量统计",type:"pie", //饼状图：piedata, //放入数据//设置环形图的文本标签label:{position:"inside"//设置标签位置 outside外侧展示 inside内部展示 center中心展示}}]

         设置南丁格尔玫瑰图根据占比更直观的看到数据

series:[//分类{name:"销量统计",type:"pie", //饼状图：piedata, //放入数据roseType:"area" //是否设置成南丁格尔图}]

折线图 

        折线图的基本设置

<template>
<div ref="ec" id="sec"></div>
</template><script>
import * as echarts from "echarts" //引用
export default {mounted(){let mc = echarts.init(this.$refs.ec) //初始化//设置数据let xData = ['x1','x2','x3','x4']let yData = [120,100,70,99]let option ={title:{//设置标题text:"折线图",x:"center"},xAxis:{//x设置type:"category", //category类目轴data:xData //类目数据},yAxis:{type:"value", //设置数值},series:[//设置系列{type:"line", //折线图linedata:yData //展示数据}]}//配置项绘制mc.setOption(option)}
}
</script><style>
#sec{width: 500px;height: 500px;border: 1px solid royalblue;
}
</style>

        折线图的更多样式  

        开启平滑过渡

series:[//设置系列{type:"line", //折线图linedata:yData, //展示数据smooth:true, //开启平滑过度}]

         内容填充样式

series:[//设置系列{type:"line", //折线图linedata:yData, //展示数据smooth:true, //开启平滑过度areaStyle:{}}]

        设置标注最大值、最小值、平均值

 series:[//设置系列{type:"line", //折线图linedata:yData, //展示数据markPoint:{data:[{type:"max",name:"最大值"},{type:"min",name:"最小值"}]},markLine:{data:[{type:"average",name:"平均值"}]}}]

         设置多条折线图堆叠效果

<template>
<div ref="ec" id="sec"></div>
</template><script>
import * as echarts from "echarts" //引用
export default {mounted(){let mc = echarts.init(this.$refs.ec) //初始化//设置数据let xData = ['x1','x2','x3','x4']let yData1 = [120,100,70,99]let yData2 = [50,60,70,99]let yData3 = [71,180,70,50]let yData4 = [54,177,45,91]let option ={title:{//设置标题text:"折线图",x:"center"},xAxis:{//x设置type:"category", //category类目轴data:xData //类目数据},yAxis:{type:"value", //设置数值},series:[//设置系列{name:"数据1",type:"line",//数据堆叠stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值data:yData1 //数据},{name:"数据2",type:"line",//数据堆叠stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值data:yData2 //数据},{name:"数据3",type:"line",//数据堆叠stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值data:yData3 //数据}, {name:"数据4",type:"line",//数据堆叠stack:"num", //数据堆叠要求数据为同类型，需要匹配相同的stack属性值data:yData4 //数据}]}//配置项绘制mc.setOption(option)}
}
</script><style>
#sec{width: 500px;height: 500px;border: 1px solid royalblue;
}
</style>