一，安装

官方网址：
https://echarts.apache.org/zh/index.html
采用npm：

npm install echarts --save

二，基本使用

这里主要讲在vue单页面开发中怎么使用

1，先定义好echarts通用化组件

<template><div :class="className" :style="{height:height,width:width}" />
</template>
<script>
// 按需引入 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')export default {props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '350px'},// 父组件传递过来的图表数据chartData: {type: Object,required: true}},data() {return {// Echarts实例chart: null,};},watch: {/* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */chartData: {deep: true,handler(val) {this.setOptions(val)}}},mounted() {/* 图表初始化 */this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}/* 释放图表实例 */this.chart.dispose()/* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */this.chart = null},methods: {initChart() {//使用准备好的dom,初始化echarts实例this.chart = echarts.init(this.$el)this.setOptions(this.chartData)},//重新触发echarts表格，使用传入的数据进行渲染，如果未传入，则传入空对象setOptions(option = {}) {this.chart.setOption(option)}}
};
</script>
<style scoped>
</style>

2，在页面中使用这个组件–这里主要是要把图表的数据传入组件中

<template><div class="revenueBox"><div class="container"><el-radio-group v-model="rangeRadio" size="small"><el-radio-button label="1">当日</el-radio-button><el-radio-button label="2">近7天</el-radio-button><el-radio-button label="3">近30天</el-radio-button></el-radio-group><!-- 时间范围选择 --><el-date-picker type="datetime" placeholder="开始时间" v-model="startTime" class="w170 ml20"></el-date-picker><span class="tace ml10 cogr">--</span><el-date-picker type="datetime" placeholder="结束时间" v-model="endTime" class="w170 ml10"></el-date-picker><el-button size="small" class="ml20" type="primary" >确定</el-button></div><!-- 总体营业指标 --><div class="container mt20 echartsBox"><div class="title"><div class="chart-title">总体营业指标</div></div><div class="chart-data ml40"><div class="chart-data-item"><div class="co9">实收金额（元）</div><div class="co6 f30 fwb mt10 lh42">¥786.90</div></div><div class="chart-data-separate"></div><div class="chart-data-item"><div class="co9">订单数（个）</div><div class="co6 f30 fwb mt10 lh42">36个</div></div></div><div class="chart-area ml40"><echarts :chartData="option" ></echarts></div></div></div>
</template><script>
import Echarts from '@/components/echarts';
export default {components:{Echarts,},name: "revenueMain",data() {return {rangeRadio:'2',startTime:'',endTime:'',option: {title: {text: '总体营业指标统计图',textStyle: {color: "#333333"},},tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},color: ["#B34038", "#334553"],legend: {data: ['实收金额', '订单数']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [{type: 'value'}],series: [{name: '实收金额',type: 'bar',data: [320, 332, 301, 334, 390, 330, 320]},{name: '订单数',type: 'bar',stack: '广告',data: [120, 132, 101, 134, 90, 230, 210]}]}};},created() {},mounted() {},methods: {},};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.revenueBox .echartsBox{padding: 0 ;.title{background: #D2E0FC;height: 60px;display: flex;align-items: center;}
}
.container{background: #FFFFFF;padding: 25px 24px;
}
.chart-title{border-left: 2px solid #4F7BCA;padding-left: 6px;color: #333333;font-size: 16px;font-weight: bold;
}
.chart-data{display: flex;margin-top: 35px;&-item{width: 160px;height: 62px;}&-separate{width: 1px;height: 62px;margin-right: 40px;background: #E9E8E8;}
}
.chart-area{width: 76%;margin-top: 40px;padding: 20px 30px;box-shadow: 0 2px 13px 0 rgba(75, 75, 75, 0.23);
}
.dyic{display: block;}
.w170{width: 170px;}
.ml20{margin-left: 20px;}
.cogr{color:#E9E8E8;}
.lh42{line-height: 42px;}
</style>

3，实际效果

echarts--（1）--基本使用相关推荐

echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
echarts 横纵分割线颜色透明度
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {c ...
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市，并定义复杂样式
实现如下效果用echarts geo类型的中国地图封装vue组件,具体的地图信息china.json传送门https://blog.csdn.net/qq_37860634/article/deta ...
JS实现每隔几个字符添加字符(串)：实现每间隔10个字就换行一次，多用于echarts横坐标的显示文本拥挤换行；实现间隔8个字符就添加❤❤
//最直接一行代码搞定---------------------------------------- '实现每间隔10个字就换行一次,多用于echarts横坐标的显示文本'.replace(/(.{ ...

echarts--（1）--基本使用

一，安装

二，基本使用

1，先定义好echarts通用化组件

2，在页面中使用这个组件–这里主要是要把图表的数据传入组件中

3，实际效果

echarts--（1）--基本使用相关推荐

最新文章

热门文章