标签：color true 绑定 chart default 双向 type echarts
echarts图形根据数据变化而变化
1.封装 ecahrts-view组件
<!--
图表
@params: width 宽度
@params: height 高度
@params: autoResize 是否自动调整大小
@params: chartOption 图表的配置
-->
<template>
<div class="chart">
<div ref="chart" :style="{ height: height, width: width }" />
</div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import echarts from 'echarts'
export default {
name: 'ChartView',
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '100%',
},
autoResize: {
type: Boolean,
default: true,
},
chartOption: {
type: Object,
required: true,
},
type: {
type: String,
default: 'canvas',
},
},
data() {
return {
chart: null,
}
},
watch: {
chartOption: {
deep: true,
handler(newVal) {
this.setOptions(newVal)
},
},
},
created() {
},
mounted() {
this.initChart()
if (this.autoResize) {
window.addEventListener('resize', this.resizeHandler)
}
},
beforeDestroy() {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener('resize', this.resizeHandler)
}
this.chart.dispose()
this.chart = null
},
methods: {
resizeHandler() {
this.chart.resize()
},
initChart() {
this.chart = echarts.init(this.$refs.chart, '', {
renderer: this.type,
})
this.chart.setOption(this.chartOption)
this.chart.on('click', this.handleClick)
},
handleClick(params) {
this.$emit('click', params)
},
setOptions(option) {
this.clearChart()
this.resizeHandler()
if (this.chart) {
this.chart.setOption(option)
}
},
refresh() {
this.setOptions(this.chartOption)
},
clearChart() {
this.chart && this.chart.clear()
},
},
}
</script>
<style scoped lang="scss"></style>
2.main.js导入注册
import ChartPanel from '@components/echarts/index.vue' // echarts组件
Vue.component(ChartPanel.name, ChartPanel)
3.文件目录构成
4.echarts/index.js
const modulesFiles = require.context('./options', true, /index.js$/)
//接受三个参数（require.context(directory,useSubdirectories,regExp)）
//directory：说明需要检索的目录
//useSubdirectories：是否检索子目录
//regExp: 匹配文件的正则表达式,一般是文件名
let modules = {}
modulesFiles.keys().forEach(item => {
modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules
5.导入注册
import eChartFn from '@components/echarts/index.js' // echarts封装的options函数
Vue.prototype.$eChartFn = eChartFn
6.例如双柱形图
echarts/options/systemRun/index.js
// 分车流量及收入情况
import echarts from 'echarts'
const systemRun = function(datas, everyDay) {
var oldOutData = datas.md_system
var newOutData = datas.audit_system
const defaultConfig = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: '2%',
// right: '2%',
bottom: '14%',
top: '16%',
containLabel: true,
},
legend: {
data: ['柱形1', '柱形2'],
// x:'right', //可设定图例在左、右、居中
y: '90%', //可设定图例在上、下、居中
x:'40%',
textStyle: {
color: '#000',
fontSize: 14,
fontWeight: 600,
},
itemWidth: 18,
itemHeight: 18,
// itemGap: 35
},
xAxis: {
type: 'category',
data: everyDay,
axisLine: {
show: false, //不显示坐标轴轴线
},
axisTick: {
show: false, //不显示坐标轴刻度
},
axisLabel: {
interval: 0,
rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 14,
fontWeight: 700,
color: '#59585D',
},
},
},
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#000',
fontSize: 14,
fontWeight: '600',
// padding: [0, -1700, 0, 1000], // 四个数字分别为上右下左与原位置距离
},
splitLine: {
show: false,
lineStyle: {
color: '#999999',
type: 'dashed',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#999999',
},
},
axisLabel: {
show: true,
textStyle: {
fontSize: 14,
fontWeight: 700,
color: '#585B73',
},
},
},
],
series: [
{
name: '柱形1',
type: 'bar',
barWidth: '20%',
itemStyle: {
normal: {
color: '#4F81BD',
barBorderRadius: 2,
},
},
data: oldOutData,
},
{
name: '柱形2',
type: 'bar',
barWidth: '20%',
itemStyle: {
normal: {
color: '#C0504D',
barBorderRadius: 2,
},
},
data: newOutData,
},
],
}
const opt = Object.assign({}, defaultConfig)
return opt
}
export default {
systemRun,
}
最终调用：
data:{
chartSystemOpt: {},
},
created(){
this.chartSystemOpt = this.$eChartFn.systemRun(this.incomeDataVal, this.everyDay);
},
<div class="echarts">
<chart-view
class="echart-zzt"
height="500px"
width="110%"
:chart-option="chartSystemOpt"
:auto-resize="true"
/>
</div>
标签：color,true,绑定,chart,default,双向,type,echarts 来源： https://blog.csdn.net/gentleman_hua/article/details/122818813
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。