プロジェクトのシナリオ:
Echartsを使ってvueでチャートを可視化、公式サイトは以下の通り
インストールして使用します。
①npmから取得
npm install echarts --save
②新しいecharts.js
注: echarts.js のパスは、自分の習慣に従って保存されます
(利点: プロジェクトのメモリを節約、欠点: より面倒、各コンポーネントに精通する必要があります)
//按需引入echarts，在echarts.js里
import * as echarts from 'echarts'
// 引入柱状图图表和折线图表、饼图表、散点图，图表后缀都为 Chart
import { BarChart ， LineChart, PieChart, ScatterChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
PieChart,
ScatterChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
// 导出
export default echartsecharts.js [グローバル インポート]:
1) main.js での導入は省パフォーマンス版のグローバル導入
// main.js
import echarts from './js/echarts'
Vue.prototype.$echarts = echarts //原型链挂载到全局2) シングルページファイルの完全なコード
コンテナの高さを必ず設定してください。そうしないとチャートが出てきません！
<template>
<div id="chart" style="height: 400px" ref="chart"></div>
</template>
<script>
export default {
data() {
chart: null // echarts图表实例
},
methods: {
initChart () {
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption({
title: {
text: 'Echarts大标题',
subtext: 'Echarts副标题'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar', // 柱状图
data: [5, 20, 36, 10, 10, 20]
},
{
name: '利润',
smooth: true,
type: 'line', // 折线图
data: [2, 23, 5, 54, 9, 33]
}
]
})
},
},
mounted () {
this.initChart();//页面挂载echarts
},
</script>
レンダリング:
echarts.js [オンデマンドでインポート]:
1) 1 つのページに直接インポートする
// 某个vue文件
import echarts from '../../js/echarts.js'
2) 完全なコード
注：コンテナセットの高さ
< template >
<div id="chart" style="height: 400px" ref="chart"></div>
</ >
<script>
// 某个vue文件
import echarts from '../../js/echarts.js'
export default {
data() {
chart: null // echarts图表实例
},
methods: {
initChart() {
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption({
title: {
text: 'echarts主标题'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
toolbox: {
feature: {
saveAsImage: { }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
data: [720, 600, 850, 780, 670, 1110, 630],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: { },
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: { },
emphasis: {
focus: 'series'
},
data: [220, 232, 201, 234, 290, 330, 320]
},
]
})
},
},
mounted () {
this.initChart()//页面挂载echarts
},
</script>
レンダリング:
著者の以前の記事、