echarts 自定义legend 初始化为灰色
<template>
<div>
<!--城市消防安全综合态势 图表 -->
<div id="main" style="width: 480px; height: 260px"></div>
</div>
</template>
<script>
import cityData from "@/mock/rightCity";
var echarts = require("echarts"); // 引入echart 或者 import echarts from "echarts"
export default {
name: "home",
// 写在mounted 函数中
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
var option = {
backgroundColor: "#091c2e",
tooltip: {
trigger: "axis",
show: true,
},
legend: {
show: true,
icon: "rect",
padding: [170, 50, 0, 0],
// bottom: 0,
textStyle: {
fontSize: 12,
color: "#fff",
},
data: [
{
name: "全市",
icon: "rect",
},
{
name: "黄浦",
icon: "rect",
},
{
name: "徐汇",
icon: "rect",
},
{
name: "长宁",
icon: "rect",
},
{
name: "静安",
icon: "rect",
},
{
name: "普陀",
icon: "rect",
},
{
name: "虹口",
icon: "rect",
},
{
name: "杨浦",
icon: "rect",
},
{
name: "闵行",
icon: "rect",
},
{
name: "宝山",
icon: "rect",
},
{
name: "嘉定",
icon: "rect",
},
{
name: "松江",
icon: "rect",
},
{
name: "金山",
icon: "rect",
},
{
name: "青浦",
icon: "rect",
},
{
name: "奉贤",
icon: "rect",
},
{
name: "崇明",
icon: "rect",
},
{
name: "浦东",
icon: "rect",
},
],
selected: {
全市: true,
黄浦: true,
徐汇: true,
长宁: true,
静安: true,
普陀: false,
虹口: false,
杨浦: false,
闵行: false,
宝山: false,
嘉定: false,
松江: false,
金山: false,
青浦: false,
奉贤: false,
崇明: false,
浦东: false,
},
},
grid: {
left: "5%",
right: "5%",
top: "10%",
bottom: "40%",
containLabel: true,
},
xAxis: {
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
axisLine: {
// 坐标轴刻度相关设置。
show: true,
alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
interval: "auto", // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
inside: false, // 坐标轴刻度是否朝内，默认朝外。
length: 5, // 坐标轴刻度的长度。
lineStyle: {
// 刻度线的样式设置。
color: "#fff", // 刻度线的颜色，默认取 axisTick.lineStyle.color。
width: 1,
type: "solid", // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
}, // 坐标轴轴线相关设置。
// data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"],
},
yAxis: {
type: "value",
min: "0",
max: "20",
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
// 坐标轴刻度相关设置。
show: true,
alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
interval: "auto", // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
inside: false, // 坐标轴刻度是否朝内，默认朝外。
length: 5, // 坐标轴刻度的长度。
lineStyle: {
// 刻度线的样式设置。
color: "#fff", // 刻度线的颜色，默认取 axisTick.lineStyle.color。
width: 1,
type: "solid", // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
},
}, // 坐标轴轴线相关设置。
},
series: [
{
name: "全市",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#3366cc",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.HP,
},
{
name: "黄浦",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#dc3912",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.HP,
},
{
name: "徐汇",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#ff9900",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.XH,
},
{
name: "长宁",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#CDCDCD",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.CN,
},
{
name: "静安",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#109618",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.JA,
},
{
name: "普陀",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#990099",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.PT,
},
{
name: "虹口",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#0099c6",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.HK,
},
{
name: "杨浦",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#dd4477",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.YP,
},
{
name: "闵行",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#66aa00",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.MH,
},
{
name: "宝山",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#b82e2e",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.BS,
},
{
name: "嘉定",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#994499",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.JD,
},
{
name: "松江",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#22aa99",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.SJ,
},
{
name: "金山",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#aaaa11",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.JS,
},
{
name: "青浦",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#6633cc",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.QP,
},
{
name: "奉贤",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#329262",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.FX,
},
{
name: "崇明",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#a9c413",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.CM,
},
{
name: "浦东",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
lineStyle: {},
itemStyle: {
color: "#8b0707",
borderColor: "#fff",
borderWidth: 2,
},
data: cityData.PD,
},
],
};
myChart.setOption(option);
// myChart.off('legendselectchanged') //解决重复触发
// myChart.on("legendselectchanged", function (params) {
// myChart.setOption({
// legend: { selected: { [params.name]: true } },
// });
// console.log("点击了", params.name);
// // do something
// });
},
};
</script>
echarts 自定义legend 初始化为灰色相关推荐
- 求大神赐教，如何实现echarts自定义legend的样式 如图下的这种
求大神赐教,如何实现echarts自定义legend的样式 如图下的这种 嘤嘤嘤 不会写
- echarts自定义legend样式
最近要完成显示一个饼图,使用echarts组件,先用官方给定的模板加载出样式,然后修改为自定义的样式.如下图是要自定义legend. 先放上官方加载出的代码 this.chart.setOption( ...
- echarts 自定义legend，线性渐变
先看效果图,业务要求:一次最多两个系列,去掉最开始的系列 不管是用原生 jquery vue react基本思路都是 : 改变 series clear() 再setOption() html < ...
- html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这 难点在于: 1.这里的图例文 ...
- 【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录 先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
- Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
- echarts 定制legend内容，显示和位置
echarts 定制legend内容,显示和位置 1.type(当图例很多的时候可以用到) 2.orient(图例的排版方向) 3.top,bottom,left,right(图例在容器中的位置) 4 ...
- 用Echarts自定义多系列左右双坐标对比的图表，适合展示TGI对比等场景
用Echarts自定义多系列左右双坐标对比的图表,适合展示TGI对比等场景. renderItem = function (params, api) {console.log('----------- ...
- 饼图自定义legend文字内容，以及饼图中间显示数量 ，中国地图制作
echarts中升级到版本5以后,使用方法发生了改变,注意不兼容ie8了,还有引入方法改变了. cnpm install echarts --save import * as echarts from ...
最新文章
- CTFshow php特性 web115
- linux u盘内容乱码,Linux挂载U盘，中文显示为乱码
- servlet的一些简单理解
- scrapy学习资料汇总
- 响应面法求可靠度指标代码_基于可靠度理论的既有桥梁结构承载能力评估——结构可靠度理论若干基本概念...
- opencv 特征匹配和
- 独立站现在好不好做？
- python正则表达式怎么用_python正则表达式的使用
- 图的广度优先搜索算法
- C#-WinForm-发送邮件
- 狂神说Java--Java学习笔记(合集)
- 打开和关闭Hadoop，Hbase 命令
- 项目管理、Bug管理软件工具:禅道，BugFree，Redmine
- 2019微博热点，盘一盘那些记忆中的大瓜
- 缺氧游戏 游戏泉修改_自己用的
- 关于H5页面在iPhoneX刘海屏适配(转）
- Node.js脚本项目合集（一）：Node.js+FFmpeg实现批量从B站导出离线缓存视频到mp4格式，mp4转mp3，实现听歌自由
- 红色建筑装饰公司营销型网站织梦模板
- CRUSH与PG分布
- zoj 2675 Little Mammoth 圆与四边形的公共面积