前言
本文档旨在为开发者提供基于 Vue 3 的 ECharts 基础代码示例，涵盖多种常见图表类型，包括柱状图、折线图、饼状图、环状图、散点图和雷达图。每种图表类型不仅附带了详尽的代码示例，还包含了相应的配置说明，以便开发者能够轻松理解和实现不同的图表展示效果。通过这些示例，开发者可以快速上手 ECharts，灵活地将数据可视化应用于实际项目中，提升用户体验和数据分析的效果。无论是展示趋势、对比数据还是分析分布，本文档都将为您提供必要的工具和指导。
基础代码
vue3
```XML <template> <div> <div class="data-view"> <el-card> <div id="main1"></div> </el-card> </div> </div> </template> <script setup> import * as echarts from 'echarts' import { onMounted } from 'vue'; onMounted(() => { let chartDom = document.getElementById("main1") // 可改变颜色 // let myChart = echarts.init(chartDom,"dark"); let myChart = echarts.init(chartDom); let option = { // 当鼠标放在bar 上面 会出现 提示 tooltip: { show: true, trigger: 'axis', axisPointer: { type: "cross" // shadow,line,cross } }, title: { text: "主标题", x: "center", y: "top", subtext: "副标题" }, legend: { // type: "scroll", orient: "horizontal", // vertical icon: 'rect',//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none itemWidth: 16, // 设置宽度 itemHeight: 16, // 设置高度 itemGap: 28, // 设置间距 // data: ['最高温', '最低温'], data: ['大一', '大二', '大三'], textStyle: { //文字样式 color: '#c1dafc', fontSize: '14' }, left: '20%' }, xAxis: [ { offset: 10, // max: 2020, name: '年月', type: 'category', data: ['2019.05', '2019.06', '2019.07', '2019.08'], axisPointer: { type: 'shadow' }, // x 轴的 线 的操作 axisLine: { symbol: "arrow", lineStyle: { type: "solid" } }, // 刻度线的操作 axisTick: { length: 6, type: "", }, axisLabel: { // formatter: "{value}kg", align: "center" } }, ], yAxis: [ // 添加两个的话 ，另一个会在另一边 // { // type: "value", name: "上课时间" // }, { // 坐标轴的位置 // position: "right", axisLine: { show: true, }, type: 'value', name: '课时数', nameLocation: 'end', min: 0, max: 200, interval: 50, // 每次显示的间隔 axisLabel: { formatter: '{value}' }, } ], series: [ { name: '大一', type: 'bar', barWidth: '30%', data: [89, 101, 181, 141], emphasis: { focus: 'self',// self 当放上去就显示自己，series 显示所有相关的， blurScope: "series" }, }, { name: '大二', type: 'bar', barWidth: '30%', data: [84, 87, 142, 138], emphasis: { itemStyle: { // 高亮时点的颜色。 color: 'blue' }, label: { show: true, // 高亮时标签的文字。 formatter: 'This is a emphasis label.' } } }, { name: '大三', type: 'bar', barWidth: '30%', // 改变两个bar 的间距 barGap: '0', data: [101, 109, 151, 132] } ], color: ['#E6A23C', '#409EFF', '#67C23A'] }; myChart.setOption(option); }) </script> <style scoped lang="scss"> .data-view { width: 100%; display: flex; justify-content: space-between; .el-card { width: 40%; #main1, #main2 { height: 500px; } } } </style>
折线图
type改成line
stack：‘x’,
平滑曲线： smooth [ ]( smooth: true)：true
let option3 = { color: ["#00f2f1", "#ed3f35"], title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { // type: "rect", icon: "circle", textStyle: { color: "#4c9bfd" }, right: "10%" }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, show: true, borderColor: "#012f4a" }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', // 将点放不放在 y 轴上 boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 刻度线 axisTick: { show: false, }, axisLabel: { color: "#4c9bfd" }, // 去除轴线 axisLine: { show: false } }, yAxis: { type: 'value', axisTick: { show: false }, splitLine: { lineStyle: { color: "#012f4a" } } }, series: [ { name: 'Email', type: 'line', data: yearData[a].data[a], smooth: true }, { name: 'Union Ads', type: 'line', data: yearData[b].data[a], smooth: true }, ] };
饼状图
option = { series: [ { type: 'pie', data: [ { value: 335, name: '直接访问' }, { value: 234, name: '联盟广告' }, { value: 1548, name: '搜索引擎' } ], radius: '50%' } ] };
不显示标签
label: { show: false },
改变为玫瑰图
roseType: 'area'
Plain Text 点击可选 selectedMode: 'single',
环状图
需要4个数据
且 radius 中设置的值为数组为两个的时候会变成环状图
let option = { title: { text: '圆环图的例子', left: 'center', top: 'center' }, series: [ { type: 'pie', data: [ { value: 335, name: 'A' }, { value: 234, name: 'B' }, { value: 1548, name: 'C' } ], // 大小,圆的半径 radius: ['40%', '80%'] } ] };
散点图
type: 'scatter',
let option = { xAxis: { data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] }, yAxis: {}, series: [ { type: 'scatter', data: [220, 182, 191, 234, 290, 330, 310], symbolSize: 20, symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z' } ] };
雷达图
mounted() { var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); let option = { title: { text: 'Basic Radar Chart' }, legend: { right: 0, orient: 'vertical', data: ['Allocated Budget', 'Actual Spending'] }, radar: { // shape: 'circle', indicator: [ { name: 'Sales', max: 6500 }, { name: 'Administration', max: 16000 }, { name: 'Information Technology', max: 30000 }, { name: 'Customer Support', max: 38000 }, { name: 'Development', max: 52000 }, // { name: 'Marketing', max: 25000 } ] }, series: [ { name: 'Budget vs spending', // polygon type: 'radar', data: [ { value: [4200, 3000, 20000, 35000, 50000,], name: 'Allocated Budget' }, { value: [5000, 14000, 28000, 26000, 42000], name: 'Actual Spending' } ] } ] }; myChart.setOption(option); }
