1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| <template>
| <div class="Echarts_box" :style="{ width: width, height: height }">
| <div id="myEcharts1" style="width: 100%; height: 100%"></div>
| </div>
| </template>
| <script lang="ts" setup>
| import {
| ref,
| onMounted,
| onBeforeUnmount,
| reactive,
| defineProps,
| defineEmits,
| watch,
| onUnmounted,
| } from "vue";
| import * as echarts from "echarts";
|
| //defineProps 来接收组件的传值
| const props = defineProps({
| width: String,
| height: String,
| });
| let myEcharts = echarts;
| onMounted(() => {
| initChart();
| });
|
| onUnmounted(() => {
| myEcharts.dispose;
| });
|
| function initChart() {
| let chart = myEcharts.init(
| document.getElementById("myEcharts1"),
| "purple-passion"
| );
| chart.setOption({
| title: {
| text: "",
| left: "center",
| },
| toolbox: {
| show: true, //是否显示工具栏组件
| orient: "horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'
| itemSize: 15, //工具栏 icon 的大小
| itemGap: 10, //工具栏 icon 每项之间的间隔
| showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
| feature: {
| mark: {
| // '辅助线开关'
| show: true,
| },
| // dataView : { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
| // show: true, //是否显示该工具。
| // title:"数据视图",
| // readOnly: false, //是否不可编辑（只读）
| // lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
| // backgroundColor:"#fff", //数据视图浮层背景色。
| // textareaColor:"#fff", //数据视图浮层文本输入区背景色
| // textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
| // textColor:"#000", //文本颜色。
| // buttonColor:"#c23531", //按钮颜色。
| // buttonTextColor:"#fff", //按钮文本颜色。
| // },
| // magicType: { //动态类型切换
| // show: true,
| // title:"切换", //各个类型的标题文本，可以分别配置。
| // type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
| // },
| // restore : { //配置项还原。
| // show: true, //是否显示该工具。
| // title:"还原",
| // },
| saveAsImage: {
| //保存为图片。
| show: true, //是否显示该工具。
| type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。
| name: "pic1", //保存的文件名称，默认使用 title.text 作为名称
| backgroundColor: "#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
| title: "保存为图片",
| pixelRatio: 1, //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
| },
| // dataZoom :{ //数据区域缩放。目前只支持直角坐标系的缩放
| // show: true, //是否显示该工具。
| // title:"缩放", //缩放和还原的标题文本
| // xAxisIndex:0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
| // yAxisIndex:false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
| // },
| },
| zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
| z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
| left: "right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
| top: "top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
| right: "auto", //组件离容器右侧的距离,'20%'
| bottom: "auto", //组件离容器下侧的距离,'20%'
| width: "auto", //图例宽度
| height: "auto", //图例高度
| },
|
| legend: {
| data: [],
| },
| xAxis: {
| type: "category",
| data: [
| "一月",
| "二月",
| "三月",
| "四月",
| "五月",
| "六月",
| "七月",
| "八月",
| "九月",
| "十月",
| "十一月",
| "十二月",
| ],
| },
| tooltip: {
| trigger: "axis",
| },
| yAxis: {
| type: "value",
| },
| series: [
| {
| data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
| type: "line",
| smooth: true,
| symbol: "none", //取消折点圆圈
| itemStyle: {
| normal: {
| label: {
| show: false,
| position: "top",
| formatter: "{c}",
| },
| },
| },
| },
| ],
| });
| window.onresize = function () {
| chart.resize();
| };
| }
| </script>
| <style lang="less" scoped>
| .Echarts_box {
| background: #fff;
| }
| </style>
|
|
