安装ECharts包
npm install echarts --save
引入 ECharts
在main.js中引入
1 // 引入 ECharts 主模块 2 let echarts = require(‘echarts/lib/echarts‘); 3 // 引入折线图/柱状图等组件 4 require(‘echarts/lib/chart/line‘) 5 require(‘echarts/lib/chart/bar‘) 6 require(‘echarts/lib/chart/radar‘) 7 // 引入提示框和title组件,图例 8 require(‘echarts/lib/component/tooltip‘) 9 require(‘echarts/lib/component/title‘) 10 require(‘echarts/lib/component/legend‘) 11 require(‘echarts/lib/component/legendScroll‘)//图例滚动 12 //vue全局注入echarts 13 Vue.prototype.$echarts = echarts
使用它----在xx.vue文件中
-
- 准备容器
- <div id="myChart" :style="{width: ‘420px‘, height: ‘900px‘}"></div>
- js代码
-
1 //初始化echart对象 2 let myChart = this.$echarts.init(document.getElementById(‘myChart‘)); 3 //配置echart 4 myChart.setOption({ 5 grid: {//整体位置 6 top: ‘40‘, 7 right: ‘8%‘, 8 left: ‘12%‘, 9 bottom: 36, 10 }, 11 backgroundColor: ‘#fff‘, 12 xAxis: { 13 type: ‘value‘,//类型--数值表 14 position: ‘top‘,//位置 15 boundaryGap : 0,//坐标轴两侧留白 16 offset: 8,//X轴偏移 17 axisLine : {//坐标轴轴线 18 show: 0, 19 }, 20 axisTick : {show: 0},//坐标轴刻度 21 splitLine : {show: 0},//坐标轴grid区分割线 22 data: [‘10‘, ‘20‘, ‘30‘, ‘40‘],//X轴刻度 23 }, 24 yAxis: { 25 type: ‘category‘,//类型--类目表 26 name:‘期数‘, 27 nameLocation: ‘start‘, //轴名位置 28 nameTextStyle: {//Y轴名称 29 color: ‘#f00‘, 30 }, 31 offset: 8,//Y轴偏移 32 nameGap: 15,//轴名距离 33 inverse: 1,//反转 34 boundaryGap : 0,//坐标轴两侧留白 35 axisLine : {show: 0},//坐标轴轴线 36 axisTick : {show: 0},//坐标轴刻度 37 splitLine : {//坐标轴grid区分割线 38 show: 1, 39 lineStyle:{ 40 color: ‘#dcdcdc‘ 41 } 42 }, 43 data: [1,2,3,4],//y轴刻度 44 }, 45 series: [{ 46 data: [23,24,25,26],//数据--将按照类目表依次排列 47 type: ‘line‘,//折线图 48 label: {//标签 49 show: 1, 50 position: ‘insideTopLeft‘, 51 distance: 12, 52 color: ‘#000‘, 53 fontSize: 14, 54 }, 55 itemStyle:{//标记拐点颜色 56 color: (param)=>{ 57 return function(param){....} 58 } 59 }, 60 symbol: ‘circle‘,//标记-实心圆 61 symbolSize: 10,//标记-大小 62 lineStyle:{color:‘#ccc‘,},//line样式 63 }] 64 });
-
- 上面的js代码可整合成函数,方便使用和重绘.重绘时,EChart会复用可用部分,使图形进行变化.
- ECharts官网 https://www.echartsjs.com/option.html#title
- 准备容器
原文地址:https://www.cnblogs.com/Vayne-N/p/11059759.html
时间: 2024-10-29 07:11:09