项目源码地址: https://github.com/shengbid/echarts-series,如果有帮助记得给个star哈,码字不易,谢谢各位大佬
这个项目主要是对echarts中一些常用属性进行修改,用页面操作的方式,能更加直观的对echarts进行配置
主要分为两部分:1. echarts常用属性操作; 2.echarts常见图表展示
项目截图:
对于一些相对复杂的图表,例如地图,k线图,我也有单独写博客注明,地址可以看文末的推荐链接
项目是vue-cli + echarts + elementUI
在vue-cli中使用echarts步骤
1. 安装echarts npm i echarts -S
2. 在main.js中引入,注意,要用require方式引入,引入后绑定在vue原型上,方便在项目中使用
var echarts = require('echarts') Vue.prototype.$echart = echarts
3. 页面中使用
<template> <div class="line-container"> <div> <!-- 需要一个元素展示echarts,设置好width,height --> <div id="mapChart" style=" 900px;height:500px;"></div> </div> </div> </template> <script> import chinaJson from '@/utils/map/china.json' // 地图json数据引入 export default { name: 'mapChart', data() { return { option: { title: { text: '中国地图', subtext: '鼠标缩放比例大于2.5展示名称' }, tooltip: { trigger: 'item' }, series: [{ type: 'map', map: 'china', zoom: 1.2, roam: true }] }, mapChart: null } }, mounted() { // 在mounted中初始化echarts this.getMapChart() }, methods: { // 设置折线图 getMapChart() { this.mapChart = this.$echart.init(document.getElementById('mapChart')) this.$echart.registerMap('china', chinaJson); this.mapChart.setOption(this.option) </script>