当前位置：首页 > news >正文

echarts学习总结

news 2025/8/18 22:30:19

一、新建一个简单的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'}]
},