Vue项目中按需使用Echarts.js踩坑记录
2020-02-12 20:42
966 查看
Echarts.js 使用记录小结
Echart简介
百度开发的一套图表,使用方便,包括各种图表,常用的有:折线图,饼图,柱状图等等,具体可以参考[官网](https://www.echartsjs.com/examples/zh/index.html)
EChart 使用简介
一、 导入第三方包
npm install echarts -S //或者采用淘宝镜像的方式导入 cnpm install echarts -S
二、导入Echarts组件
在需要用到图表的页面进行引入
//单页面引入 import echarts from 'echarts' //全局引入,在main.js中 import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //引入组件
这是引入了所有的图表,文件较大,进阶一点的就是按需引入图表 ,如下:以按需引入K线图为例
具体可以参考Echarts附录
//注:这里用 require 不用 import 引入是因为 import 需要详细的路径 //引入基本模板 let echarts = require('echarts/lib/echarts') // 引入折线图,饼图等组件 require('echarts/lib/chart/candlestick') require('echarts/lib/chart/line') // 引入提示框和title组件,图例 require('echarts/lib/chart/effectScatter') // 拐点出闪烁,高亮 require('echarts/lib/component/tooltip') // 提示组件 require('echarts/lib/component/legend') // 图例组件 require('echarts/lib/component/markPoint') // 标注点组件 require('echarts/lib/component/markLine') // 标注线组件 require('echarts/lib/component/graphic'); //图形组件 require('echarts/lib/component/grid'); //网格组件 require('echarts/lib/component/dataZoom'); //底下滑动框组件
三、 配置option
这个是最难的,也是主要的,可以复制官方示例,在进行数据的修改 ,附上官方示例链接
**最后给到我在vue按需使用K线图源码,写的不好,仅供参考 **
<template> <div id="main"> <div id='myChart' ref="myChart"></div> </div> </template> <script> //全局引入 // import echarts from 'echarts' //引入基本模板 let echarts = require('echarts/lib/echarts') // 引入折线图等组件 require('echarts/lib/chart/candlestick') require('echarts/lib/chart/line') // require('echarts/lib/chart/bar') // require('echarts/lib/chart/radar') // 引入提示框和title组件,图例 require('echarts/lib/chart/effectScatter') // 拐点出闪烁,高亮 require('echarts/lib/component/tooltip') // 提示组件 require('echarts/lib/component/legend') // 图例组件 require('echarts/lib/component/markPoint') // 标注点组件 require('echarts/lib/component/markLine') // 标注线组件 require('echarts/lib/component/graphic'); //图形组件 require('echarts/lib/component/grid'); //网格组件 require('echarts/lib/component/dataZoom'); //底下滑动框组件 export default { name: 'echarts', data () { return { resData: '', echartsOption: { // 图表标题 title: { text: '', left: 0, top: 20 }, // 提示框 tooltip: { confine: true, trigger: 'axis',// 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis' axisPointer: { type: 'cross' } }, // 图例 legend: { data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'] }, // 网格 grid: { left: '1%', right: '5%', bottom: '0%', containLabel: true }, xAxis: { type: 'category', data: [], scale: true, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, splitNumber: 20, min: 'dataMin', max: 'dataMax' }, yAxis: { scale: true, splitArea: { show: true } }, // 区域缩放控制器 dataZoom: [ { type: 'inside', start: 50, end: 100 }, { show: true, type: 'slider', y: '90%', start: 0, end: 75 } ], //系列 series: [ { name: '日K', type: 'candlestick', data: [], itemStyle: { normal: { color: '#ec0000',// 阳线填充颜色 color0: '#00da3c',// 阴线填充颜色 borderColor: '#8A0000',//这肯定是背景色咯 borderColor0: '#008F28' } }, //标记点 markPoint: { label: { normal: { formatter: function (param) { return param != null ? Math.round(param.value) : '' } } }, data: [ { name: 'highest value', type: 'max', valueDim: 'highest' }, { name: 'lowest value', type: 'min', valueDim: 'lowest' }, { name: 'average value on close', type: 'average', valueDim: 'close' } ], // 提示框 tooltip: { formatter: function (param) { return param.name + '<br>' + (param.data.coord || '') } } }, //标记线 markLine: { // 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string symbol: ['none', 'none'], data: [ [ { name: 'from lowest to highest', type: 'min', valueDim: 'lowest', symbol: 'circle', symbolSize: 10, label: { normal: { show: false }, emphasis: { show: false } } }, { type: 'max', valueDim: 'highest', symbol: 'circle', symbolSize: 10, label: { normal: { show: false }, emphasis: { show: false } } } ] ] } }, { name: 'MA5', type: 'line', data: [], smooth: true, lineStyle: { normal: {opacity: 0.5} } }, { name: 'MA10', type: 'line', data: [], smooth: true, lineStyle: { normal: {opacity: 0.5} } }, { name: 'MA20', type: 'line', data: [], smooth: true, lineStyle: { normal: {opacity: 0.5} } }, { name: 'MA30', type: 'line', data: [], smooth: true, lineStyle: { normal: {opacity: 0.5} } }, ] } } }, mounted () { this.setEchartOption() }, methods: { //setEchartOption 方法名 并没有什么特殊 setEchartOption () { // 数据意义:开盘(open),收盘(close),最低(lowest),最高(highest) //因为还是本地项目,用的是mock模拟了一下请求操作,但实际数据还是太少,所以在下面用的还是一些静态数据 this.$http.post('/service/open/pairskline').then( res => { let data = res.data.pairskline.result.bars; let arr =[]; for(let i=0;i<data.length;i++){ for( let n in data[i]){ arr[i] = new Array(); arr[i].push(data[i].datetime) arr[i].push(Number(data[i].open) ) arr[i].push(Number(data[i].close) ) arr[i].push(Number(data[i].high) ) arr[i].push(Number(data[i].low) ) } } this.resData = splitData([ ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94], ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38], ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92], ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8], ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76], ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82], ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15], ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38], ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42], ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73], ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89], ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03], ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8], ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07], ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94], ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82], ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88], ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78], ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71], ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63], ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16], ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65], ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54], ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14], ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44], ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02], ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67], ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96], ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29], ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33], ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22], ]) //这句是接口中的数据,但是我这接口数据只有几条,就没用,还是用了上面的一些静态数据 // this.resData = splitData(arr); this.echartsOption.xAxis.data = this.resData.categoryData this.echartsOption.series[0].data = this.resData.values var a = this.resData.values this.echartsOption.series[1].data =calculateMA(5) this.echartsOption.series[2].data =calculateMA(10) this.echartsOption.series[3].data =calculateMA(20) this.echartsOption.series[4].data =calculateMA(30) //时间也有了,数据也有了,怎么不渲染? // console.log(this.resData.categoryData) var myChart = echarts.init(document.getElementById('myChart')) myChart.setOption(this.echartsOption) function splitData (rawData) { var categoryData = [] var values = [] for (var i = 0; i < rawData.length; i++) { categoryData.push(rawData[i].splice(0, 1)[0]) values.push(rawData[i]) // console.log(categoryData) // console.log(values) } return { categoryData: categoryData, values: values } } function calculateMA(dayCount) { var result = []; for (var i = 0, len = a.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += a[i - j][1]; } result.push(sum / dayCount); } return result; } }) } } } </script> <style lang="less" scoped> #myChart{ width: 100vw; height: 450px; padding: 0 4px; } </style>
废话不多说,以上就是Echart图表使用的方法,如果对你有帮助,有参考,就关注一下吧,有什么不懂的,或者是又什么错误,可以评论留言,我一定会回复的。
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录
- Vue.js学习记录之在元素与template中使用v-if指令实例
- Vue项目中是使用qrcodejs2插件生成二维码
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- Vue-cli3项目配置Vue.config.js实战记录
- 学习用Node.js和Elasticsearch构建搜索引擎(6):实际项目中常用命令使用记录
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- vue项目中使用pdf.js预览pdf文件
- vue项目中使用ECharts柱状图并利用双Y轴给柱状图添加右边框
- vue项目中安装使用echarts
- 在vue项目中使用Nprogress.js进度条的方法
- 使用 vue-cli 3 快速创建 Vue 项目及项目配置 Vue.config.js
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- 今天在新创建的VUE项目中,增加新界面,js中引入axios报错的怪问题,记录备忘
- 使用NPM搭建大型Vue.js项目框架
- 使用uni-app(Vue.js)创建运行微信小程序项目步骤
- Vue项目使用clipboard.js实现文字复制,剪切功能
- 在移动端vue项目中,使用原生js写一个日历模块