赞
踩
1、饼状图
- var chart = this.$charts.chart("chartBox", {
- chart: {
- type: "pie",
- backgroundColor: "transparent",
- options3d: {
- enabled: true,
- alpha: 30,
- },
- spacing: [0, 0, 0, 0],
- },
- title: {
- verticalAlign: "middle", //标题在环的中间显示
- text: this.total,//总数
- style: {
- fontSize: "18px",
- color: "#ffffff",
- },
- },
- tooltip: {
- pointFormat: "{series.name}:{point.percentage:.2f}%",
- style: {
- fontSize: "14px",
- color: "#000000",
- },
- },
- plotOptions: {
-
- pie: {
- point: {
- events: {
- click: function (event) {
- // 在这里添加点击事件的处理逻辑
- console.log("点击了饼图:", event.point.name, event.point.y);
-
- },
- },
- },
- allowPointSelect: true,
- cursor: "pointer",
- showInLegend: false,
- innerSize: 60,
- depth: 30,
- dataLabels: {
- enabled: false,
- format: "<b>{point.name}</b>: {point.percentage:.1f} %",
- style: {
- color:
- (this.$charts.theme &&
- this.$charts.theme.contrastTextColor) ||
- "black",
- },
- },
- },
- },
- credits: {
- enabled: false,
- },
- exporting: {
- enabled: false,
- },
- colors: ["#00FFFF", "#00B7EE", "#007BEE", "#00EEA2", "#8DE022"],
- series: [
- {
- name: "",
- data: this.info,//数据
- },
- ],
- })
2、柱状图
- const chartDom = document.getElementById("chartBox")
- var myChart = this.$echarts.init(chartDom)
- myChart.resize()
- var option
- option = {
- grid: {
- top: "10",
- bottom: "20",
- left: "50",
- right: "40",
- },
- xAxis: {
- type: "value",
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- },
- label: {
- position: "right",
- show: true,
- },
- yAxis: {
- type: "category",
- data: ["标题1", "标题", "标题", "标题", "标题"],
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: {
- color: "#ffffff",
- },
- },
- series: [
- {
- data: this.data,//数据
- type: "bar",
- showBackground: true,
- backgroundStyle: {
- color: "#e4e7ed",
- },
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
- },
- itemStyle: {
- normal: {
- barWidth: 20, // 每个柱子的宽度
- },
- },
- },
- ],
- }
- myChart.on('click', function(params) {
- console.log('点击了柱状图:', params.name,params.data);
- });
- option && myChart.setOption(option)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。