一、新建一个简单的Echarts
1、首先新建一个vue2的项目，项目中安装Echarts
cnpm install echarts --save
2、新建一个ref
<template><div ref="myecharts" id="myecharts"></div>
</template>3、引入echarts
<script>import * as echarts from 'echarts';export default {mounted() {let myEcharts = echarts.init(this.$refs.myecharts)myEcharts.setOption({title: {text: 'helloword'},xAxis: {data: [{value:'李玉',age:'21'},{value:'简隋英',age:'23'},{value:'江停',age:'24'},{value:'严峫',age:'23'}]},yAxis: {},series: [{name:'男主',type: 'bar',data:[21, 23, 24,23]}]})}}</script>4、设置#myecharts的样式
<style scoped>#myecharts {width: 500px;height: 500px;border: 1px solid red;}</style>5、执行npm run dev显示如下：
二、title标题组件，包含主标题和副标题。
三、tooltip提示框组件
四、 legend图例组件
五、柱状图
1、基本设置
1、新建一个ref
<template><div ref="myecharts" id="myecharts"></div>
</template>2、引入echarts
<script>
import * as echarts from 'echarts';
export default {mounted() {let myEcharts = echarts.init(this.$refs.myecharts)let xData = ['李玉', '简隋英', '江停', '严峫']let yData = [21, 23, 24, 23]let option = {title: {text: '小说人物'},xAxis: {data: xData,type:'category',//坐标轴类型，value数据轴，category类目轴},yAxis: {},series: [{name: '男主',type: 'bar',//系列类data: yData}]}myEcharts.setOption(option)}
}
</script>3、设置#myecharts的样式
<style scoped>#myecharts {width: 500px;height: 500px;border: 1px solid red;}</style>4、执行npm run dev显示如下：
2、设置最大值和最小值
注意：在 series : [ { markPoint : { ... } } ]
- 代码截图
- 代码编写
markPoint: {data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}]
}- npm run dev运行效果
3、设置平均值
注意：在 series : [ { markLine : { ... } } ]
- 代码截图
- 代码
markLine:{data:[{type:'average',name:'平均值'}]
},- npm run dev运行效果
六、水平柱状图
1、基本设置
注意：将xAxis和yAxis设置交换即可
- 代码截图
- 代码编写
xAxis: {type:'value'
},
yAxis: {data: xData,type: 'category',//坐标轴类型，value数据轴，category类目轴
},- npm run dev运行效果
2、设置轴的宽度
注意：series : [ { barWidth : ... } ]
- 代码截图
- 代码编写
barWidth:20,- npm run dev运行效果
3、设置整体轴的颜色
注意：series : [ { color : ... } ]
- 代码截图
- 代码编写
color:'green',- npm run dev运行效果
4、单独设置每个轴的颜色
注意： series : [ { itemStyle : normal : { color : function (params) {...} } } ]
- 代码截图
- 代码编写
itemStyle:{normal:{color:function(params){let colorList = ['red','green','pink','yellow']return colorList[params.dataIndex]}}
},- npm run dev运行效果
七、饼状图
1、 基本设置
注意：新建一个基本的饼图
- 新建一个ref
- 代码：
<div ref="bar" id="bar"></div>- 设置id：bar的style，设置宽高不然不显示
- 代码：
#bar{height: 500px;width: 500px;border: 1px solid #ccc;
}- 引入echarts
- 代码：
import * as echarts from 'echarts';- 在mounted里进行各种配置
- 代码：
mounted() {let myEcharts = echarts.init(this.$refs.bar)let data = [{value:33,name:'香蕉'},{value:31,name:'苹果'},{value:32,name:'葡萄'},{value:22,name:'荔枝'}]let option = {title: {text: '饼状图',left: 'center'},series:[{name: '统计',type: 'pie',data}]}myEcharts.setOption(option)}- 执行npm run dev
2、加一个图例
注意：legend:{}
- 代码：
legend:{},- 执行npm run dev
3、设置纵向图例
注意：legend : { ... },
- 代码：
legend:{left:'left',orient: 'verical'
},- 执行npm run dev
八、环形图
1、环形图基本配置
注意：series [ { radius : [ '' " ,'' " ] } ]
//设置饼图的半径，一项为内半径，第二项为外半径
- 代码：
//设置饼图的半径，一项为内半径，第二项为外半径
radius:['40%','70%'],- 执行npm run dev
2、隐藏文本标签
注意：series [ { label : { show: false} } ]
- 代码：
label:{show: false//默认值是true
}- 执行npm run dev
3、调整文本提示信息的位置
- 代码：
label: {show: true,//默认值是true// outsize：外展示，inside内展示，center中心展示position:'inside',
}- outsize：外展示
- inside内展示
- center中心展示 （指向哪一个显示哪一个）
九、兰丁格尔玫瑰图
1、基本设置
注意：series [ { roseType : 'area' } ]
- 代码：
roseType: 'area',- 执行npm run dev
2、设置图形阴影效果
注意：series [ { itemStyle : { ... } } ]
- 代码：
itemStyle:{shadowBlur: 200,shadowColor: '#000'
}- 执行npm run dev
3、设置每块不同颜色
注意：在data里加itemstyle.normal.color
- 代码：
let data = [{ value: 33, name: '香蕉', itemStyle: { normal: { color: 'red' } } },{ value: 31, name: '苹果', itemStyle: { normal: { color: 'blue' } } },{ value: 32, name: '葡萄', itemStyle: { normal: { color: 'yellow' } } },{ value: 22, name: '荔枝', itemStyle: { normal: { color: 'green' } } }
]- 执行npm run dev
十、折线图
1、基本设置
注意：新建一个基本的折线图
- 新建一个ref
- 代码：
<div ref="line" id="line"></div>- 设置id：line的style，设置宽高不然不显示
- 代码：
#line {height: 500px;width: 500px;border: 1px solid #ccc;
}- 引入echarts
- 代码：
import * as echarts from 'echarts';- 在mounted里进行各种配置
- 代码：
mounted() {let myEcharts = echarts.init(this.$refs.line)let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']let data = [130, 25, 30, 45, 100]let option = {xAxis: {type: 'category',data: xData},yAxis: {type: 'value'},series: [{type: 'line',data}]}myEcharts.setOption(option)}- 执行npm run dev
2、设置折线的平滑过度
注意：series [ { smooth: true } ]
- 代码：
smooth: true- 执行npm run dev
3、设置曲面下方颜色填充
注意：series [ { areaStyle:{} } ]
- 代码：
areaStyle:{}- 执行npm run dev
4、设置最大值最小值
注意：series [ { markPoint:{} } ]
- 代码：
markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]
}- 执行npm run dev
5、设置平均值
注意：series [ { markLine:{} } ]
- 代码：
markLine: {data: [{ type: 'average', name: '平均值' }]
}- 执行npm run dev
十一、多条折线图的设置
1、基本设置
注意：新建一个基本的折线图
- 新建一个ref
- 代码：
<div ref="line" id="line"></div>- 设置id：line的style，设置宽高不然不显示
- 代码：
#line {height: 500px;width: 500px;border: 1px solid #ccc;
}- 引入echarts
- 代码：
import * as echarts from 'echarts';- 在mounted里进行各种配置
- 代码：
mounted() {let myEcharts = echarts.init(this.$refs.line)let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']let dataA = [130, 25, 30, 45, 100]let dataB = [12, 54, 87, 56, 123]let dataC = [34, 44, 65, 123, 23]let dataD = [12, 65, 98, 121, 132]let option = {title:{text:'销量'},xAxis: {type: 'category',data: xData},yAxis: {type: 'value'},series: [{name:'香蕉',type:'line',stack:'num',data:dataA},{name:'苹果',type:'line',stack:'num',data:dataB},{name:'荔枝',type:'line',stack:'num',data:dataC},{name:'芒果',type:'line',stack:'num',data:dataD},]}myEcharts.setOption(option)}- 执行npm run dev
2、设置多个曲面下方的颜色填充
注意：在每一个里面设置areaStyle:{}
- 代码：
series: [{name:'香蕉',type:'line',stack:'num',data:dataA,areaStyle:{}},{name:'苹果',type:'line',stack:'num',data:dataB,areaStyle:{}},{name:'荔枝',type:'line',stack:'num',data:dataC,areaStyle:{}},{name:'芒果',type:'line',stack:'num',data:dataD,areaStyle:{}},
]- 执行npm run dev
3、设置单个高亮效果
注意：如果每一个都需要设置高亮效果，就将每一个系列都设置上
- 代码：
emphasis: {focus: 'series'
}- 执行npm run dev
十二、散点图
1、基本设置
注意：新建一个基本的散点图
- 新建一个ref
- 代码：
<div ref="scatter" id="scatter"></div>- 设置id：scatter的style，设置宽高不然不显示
- 代码：
#scatter {height: 500px;width: 500px;border: 1px solid #ccc;
}- 引入echarts
- 代码：
import * as echarts from 'echarts';- 在mounted里进行各种配置
- 代码：
mounted() {let myEcharts = echarts.init(this.$refs.scatter)let option = {xAxis: {},yAxis: {},series: [{data: [[18.2, 6.83],[6.32, 5.63],[17.0, 6.55],[8.18, 5.12],[15.0, 7.56]],type:'scatter',//散点图}]}myEcharts.setOption(option)}- 执行npm run dev
2、设置散点图大小
注意：series [ { symbolSize : 数值 } ]
- 代码：
symbolSize: 50,- 执行npm run dev
3、设置图点整体颜色
注意：series [ { color :' 色值' } ]
- 代码：
color:'red'- 执行npm run dev
4、 设置图点渐变颜色
注意：series [ { color :' 色值' } ]
- 代码：
color: {type: 'linear',//线性渐变x: 0,//相当于图形包围盒中的百分比y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: 'green'}, {offset: 1,color: 'rgba(255,233,9)'}]
}- 执行npm run dev
5、鼠标移入高亮
注意：series [ { emphasis : ... } ]
- 代码：
emphasis: {itemStyle: {borderColor: 'rgba(100,200,50,0.5)',borderWidth: 30}},- 执行npm run dev
6、鼠标移入时显示提示框
注意：tooltip:{},
- 代码：
tooltip:{},- 执行npm run dev
十三、grid属性
1、设置图形与外框的间距
注意：grid : { ... }
- 代码：
grid:{left:'70px',right:'20%',top:'30px',bottom:'20%'
},- 执行npm run dev
2、图形边框线条颜色加深
注意：grid : { show : true }
- 代码：
show:true,- 执行npm run dev
3、设置图形容器背景颜色
注意：grid : { backgroundColor : ' 色值 ', }
// 设置背景色时show:true，不然设置项不显示
- 代码：
grid: {show:true,backgroundColor:'yellow',
}- 执行npm run dev
3、 设置图形容器边框颜色
注意：grid : { borderColor : ' 色值 ', }
// 设置背景色时show:true，不然设置项不显示
- 代码：
borderColor:'red',- 执行npm run dev
十四、k线图
1、基本设置
注意：新建一个基本的k线图
- 新建一个ref
- 代码：
<div ref="candlestick" id="candlestick"></div>- 设置id：candlestick的style，设置宽高不然不显示
- 代码：
#candlestick {height: 500px;width: 500px;border: 1px solid #ccc;
}- 引入echarts
- 代码：
import * as echarts from 'echarts';- 在mounted里进行各种配置
- 代码：
export default {mounted() {let myEcharts = echarts.init(this.$refs.candlestick)let option = {xAxis: {data: ['香蕉', '苹果', '葡萄', '荔枝', '芒果']},yAxis: {},series: [{type: 'candlestick',data: [[20,34,10,38],[40,35,30,50],[31,38,33,44],[38,15,5,42]]}]}myEcharts.setOption(option)}
}- 执行npm run dev
2、设置提示内容
注意：tooltip : { ... }
- 代码：
tooltip: {trgger: 'axis',axisPointer: {type: 'cross'}
},- 执行npm run dev
3、设置上涨颜色和下跌颜色
注意：上涨：series [ { itemStyle : { color : ' 色值 ' } } ]
下跌：series [ { itemStyle : { color0 : ' 色值 ' } } ]
- 代码：
itemStyle: {color: 'blue',color0: 'yellow'
},- 执行npm run dev
4、设置上涨颜色和下跌边框颜色
注意：上涨：series [ { itemStyle : { borderColor : ' 色值 ' } } ]
下跌：series [ { itemStyle : { borderColor0 : ' 色值 ' } } ]
- 代码：
itemStyle: {borderColor:'#000',borderColor0:'#000',
},- 执行npm run dev
5、设置最大值最小值 平均值
注意：series [ { markPoint : { data : [ ... ] } } ]
- 代码：
markPoint: {data: [{name: '最大值',type: 'max',valueDim: 'highest'//在那个维度上设置最发值或最小值},{name: '最小值',type: 'min',valueDim: 'lowest'},{name: '平均值',type: 'average',valueDim: 'close'}]
},- 执行npm run dev
