Сцены
- 1,EchartsПри использовании нужно написать кучуoption, если вам нужно написать по одному для каждой диаграммы, объем кода в файле будет очень большим
- 2. Неудобно повторно использовать
нужно
- 1. Простота повторного использования
- 2. Отображать диаграммы классов, отделять данные от бизнеса и стиля и передавать только данные
- 3. В проекте необходимо будет использовать несколько диаграмм, чтобы обеспечить автоматический импорт с меньшим количеством кода, нет необходимости в одной за другой.import
- 4. Мои графики часто используются в визуализации данных на большом экране, и принят метод пропорционального масштабирования, поэтому графики также могут автоматически масштабироваться в соответствии с масштабированием интерфейса, и нет необходимости вручную вызывать
- 5, диаграмма может быть настроена
Обзор кода
Используемые документы следующие (конкретная ссылкакод):
|-- src
|-- components
|-- chart
|-- index.vue // 图表单文件组件，供界面调用
|-- index.js // 实现自动化导入options里的图表option
|-- options // 存放各种图表的option
|-- bar // 随便一例子
|-- index.js
|-- views
|-- chartTest // 实例所在
|-- index.vue
|-- index.scss
|-- index.js
|-- main.js // 全局引入echarts图表
выполнить
components--chart--index.vue
Здесь определяется именованныйChartView Компонент, который предоставляет 4 настраиваемых свойства: ширинаwidth,высокоheight, следует ли автоматически изменять размерautoResize(по умолчанию), конфигурация графикаchartOption.
По умолчанию здесьCanvas Диаграмма визуализируется, вы также можете использоватьSVGДа, выберите
Конкретный код выглядит следующим образом
<template>
<div class="chart">
<div ref="chart" :style="{ height: height, width: width }" />
</div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {
BarChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers'
// 注册必须的组件
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
)
export default {
name: 'ChartView',
props: {
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
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)
}
}
},
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>
components--chart--index.js
В основном используется здесьrequire.context,ПучокoptionsОпределенные в нем диаграммы просматриваются и импортируются, поэтому нет необходимости прописывать их одну за другой в коде.import, особенно когда графиков много.
const modulesFiles = require.context('./options', true, /index.js$/)
let modules = {}
modulesFiles.keys().forEach(item => {
modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules
components--chart--options
Вот как инкапсулировать нужную диаграмму
существуетОфициальный пример Echartsслучайно выбранный пример
существуетoptionsсоздать новыйbarсодержание,barСоздайте новый в каталогеindex.jsдокумент. (Это просто личная привычка, я люблю хранить каждый график в отдельной папке. Если вам не нравится этот способ, вы можете оставить каталог и сразу файл js, ноcomponents--chart--index.jsсоответственно изменить)
Скопируйте пример напрямуюoptionкод
index.jsКонкретный код выглядит следующим образом
const testBar = (data) => {
const defaultConfig = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
const opt = Object.assign({}, defaultConfig)
return opt
}
export default {
testBar
}
testBarМетоду можно передавать параметры, при его использовании в качестве параметров могут передаваться свойства, которые необходимо настроить графику, такие как: данные данных, цвет графика и т.д.
main.js
Здесь инкапсулированные компоненты Echarts представлены глобально для облегчения вызовов интерфейса. (Что касается способа одной ссылки, то нет необходимости говорить больше)
Конкретный код выглядит следующим образом:
import eChartFn from '@/components/chart/index.js'
import ChartPanel from '@/components/chart/index.vue'
Vue.component(ChartPanel.name, ChartPanel)
Vue.prototype.$eChartFn = eChartFn
chartTest
Вот как вызвать инкапсуляциюbarДиаграмма, основной код выглядит следующим образом
index.vue
<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />
index.js
export default {
name: 'chartTestView',
data() {
return {
chartOpt: {}
}
},
mounted() {},
created() {
this.chartOpt = this.$eChartFn.testBar()
},
methods: {
},
watch: {}
}
Эффект следующий
Вы можете попробовать перетащить размер браузера.Вы можете видеть, что диаграмма также автоматически масштабируется при перетаскивании браузера.
код
согласно с代码总览каталог для переходакодПросто поищите.
Суммировать
Различные диаграммы, используемые Echarts, в основном можно найти вОфициальный пример Echartsа такжеСовместное использование визуализации Echartsвстречается, в частности,Совместное использование визуализации Echarts, Вы можете обратиться к нему, когда будете делать проект.
сверху, инкапсулированныйchartкомпонент, описанным выше способом, поместите графикoptionКонфигурация и соответствующая обработка размещеныoptionsВнизу папки при вызове графика загрузить соответствующийoption, а это всего несколько строк кода, что более удобно.
chartКомпоненты легко повторно использовать, и их можно использовать напрямую.
Пополнить
В комментариях я сказал, что хочу динамически изменять атрибуты в опции, я сделал небольшой пример, динамическая модификацияpieграфикаdataа такжеcolorСвойства, это пример, который можно использовать непосредственно в продакшне, просто обратитесь к коду напрямую, и я не буду вдаваться в подробности. Если вы хотите изменить какие-либо свойства, просто передайте параметры напрямую. Вы можете передавать определенные параметры. Если вы хотите изменить больше атрибутов, инкапсулируйте параметры в одинjsonВы также можете пройти его. знать, как инкапсулироватьoptionЕго можно использовать гибко.
Ниже приведен добавленный ссылочный код
|-- src
|-- components
|-- chart
|-- options // 存放各种图表的option
|-- pie // pie例子
|-- index.js
|-- views
|-- chartTest // 实例所在
|-- index.vue
|-- index.scss
|-- index.js
Использование кода вызывается непосредственно в одной строке
this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])
Эффект следующий:
Дополнение 2: Опрос подсветки диаграммы, использование dispatchAction
визуализация
инструкции
плюс:play-highlight="true"характеристики
<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" />
Основной код реализации находится в следующем файлеplayHighlightActionВ методе ссылкапример выделения вызова круговой диаграммы echarts dispatchActionосуществленный. Это просто опрос выделения, и конкретная реализация зависит от стиля документа.
|-- src
|-- components
|-- chart
|-- index.js // 实现自动化导入options里的图表option